动手实现,实现类似Twitter的启动动画

动手实现,实现类似Twitter的启动动画。Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,胡屹
校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎参与翻译组。

当自己首先次打开 twitter
的时候,就被它的起步动画惊艳到了。但是分析一下这几个动画其实也一见倾心完结,于是飞速做一个出去看看。

来来来,今日大家通过兑现一个近似推特的启航动画来看看CAKeyFrame
Animation和CAAnimation Group怎么玩。

Twitter

图片 1

86d6277f9e2f070837f4f132e224b899a901f20b.jpg

Twitter的“fave” 动画

近年来 推特通过引入一段新的动画片重新设计了“fave”按钮(也叫“fav”)。这段动画并不借助
CSS transition,而是由一连串图片组成的。上边显示如何用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新成立那段动画。

图片 2

之所以后天我们的要紧到了第七章,CAKeyFrame Animation和CAAnimation
Group。末了的要命启动动画完全是为了推行一下探访CAKeyFrame
Animation和CAAnimation Group怎么拔取。

简介

推文(Tweet)(中文常称为为推特(TWTR.US)),它是美国都一个争执互连网及微博客服务网站。它是和讯客的杰出应用。可以让用户写不当先140个字符的“推文”。推特是一个百般受欢迎的张罗网络及新浪客服务的网站,允许用户将协调的如今动态和想法以移动电话中的短信息方式(推文)揭橥。

移步爆发的错觉

那段动画的作用类似于观看古老的西洋镜,该装置展现的是一多级接二连三的环绕着圆筒的插图。在底下的以身作则中,大家不利用圆筒,而是在某个元素内部展现一多元图片。

任何动画效果可以拆分为以下几步:

  • 布署一个与 LaunchScreen 相同的界面
  • 让视图中间的 Logo 先缩短后加大直至盖满整个屏幕
  • Logo 在拓宽进程中国和扶桑益变透明
  • Initial View Controller 的情节有点放大后恢复生机原状

拆分完将来就好办咯,一步步来促成吗~

有读者私下说更新速度太慢了。在码云上看了一晃下载的计算,发现实际下载的童鞋并不是尤其多。倘若只是探访思路,或者复习一下这么些基础知识,确实是很快。不过只要对于那一个内容不是专程通晓,提议依旧敲一边代码,看看自己能碰着什么坑。

Twitter素养

推特影响着大量人的生存,小到柴米油盐,大到国际家政治都能在地点发现,每个人都在摘登自己的看法,观点,使得它像是一份“报纸”,而人们都足以改为报章的编辑,也正因如此,在行使时,大家更应讲究团结的素养,使它能真正变成风靡社区的增强器。大家要在互联网生活中更合理的使用推特(Twitter),无论是分享音信依然简单的丰盛话题标签,使和谐不停成长,能推出越来越多更有价值的新闻,使和谐有价值的事物能赢得更加多的拓宽。

示例

把鼠标悬停在点滴上就足以寓目动画效果(请到原文翻看动画效果——译者注)。

在本示例中,我们将从创设一多元能整合动画的图形开端。在那里,大家拔取来源
推特 的“fave”图标动画的有的图片集:

图片 3

为了能让那几个帧动起来,我们需求把它们放置在一排上。在那几个文件中,那些帧已经排列在一排上了,那意味我们可以透过设置背景地方(background-position)属性使背景从第一帧过渡到最后一帧。

图片 4

先布个界面吧

出于前面要求让 logo 变透明,我们选择用 mask 来完成。

let logoLayer = CALayer()
logoLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
logoLayer.position = view.center
logoLayer.contents = UIImage(named: "logo")?.cgImage
view.layer.mask = logoLayer

好了,小鸟出来了。

但一伊始这么些 logo 并不是晶莹剔透的,于是先在其上盖一层白色的
view,并改一下背景颜色吗。

let shelterView = UIView(frame: view.frame)
shelterView.backgroundColor = .white
view.addSubview(shelterView)

window!.backgroundColor = UIColor(red: 29 / 255.0, green: 161 / 255.0, blue: 242 / 255.0, alpha: 1)

棒,第一步成功。

我写一篇分享文章大致要4~6个小时,大体是三有的:想到合适的例证,敲代码写注释,写文章。平常都会看自己眼前的气象,决定是先写swift版仍旧OC版,然后不动脑子的翻译成其它一版调整一下BUG。那样也是为了操练自己,前段时间发现自己有时候会不自觉的把二种语言混在一起,那个习惯特别不好,所以想用那种格局自己改进一下。到最终更新写作品的时候反而更自在了,因为不用动脑。哈哈~

推特(Twitter)的特点(摘取自《网络素养》p129~130)

Steps() 时序函数

大部的时序函数,例如 ease(缓冲)和
cubic-bezier(三遍贝塞尔),都能让要素从开首状态平滑地连接到最终状态。steps
时序函数与此分歧,它并不是平缓地对接,而是将接入进程分割为自然数量的步子,并且在那几个手续之间很快地运动。

图片 5

我们先创立如下的 HTML 代码:

XHTML

<section class=”fave”></section>

1
<section class="fave"></section>

那随着做 Logo 的收缩放大吧

那边大家用
CAKeyframeAnimation,让那么些缩放动作一鼓作气。设置好初阶时间、持续时间和各种关键帧,最终让它保持动画最终的事态。

let logoAnimation = CAKeyframeAnimation(keyPath: "bounds")
logoAnimation.beginTime = CACurrentMediaTime() + 1
logoAnimation.duration = 1
logoAnimation.keyTimes = [0, 0.4, 1]
logoAnimation.values = [NSValue(cgRect: CGRect(x: 0, y: 0, width: 100, height: 100)),
                    NSValue(cgRect: CGRect(x: 0, y: 0, width: 85, height: 85)),
                    NSValue(cgRect: CGRect(x: 0, y: 0, width: 4500, height: 4500))]
logoAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut),
                             CAMediaTimingFunction(name: kCAMediaTimingFunctionDefault)]
logoAnimation.isRemovedOnCompletion = false
logoAnimation.fillMode = kCAFillModeForwards
logoLayer.add(logoAnimation, forKey: "zoomAnimation")

又好了。

Come
on~下边那张图纯粹是为着简书当作封面使用的。也不知晓怎么,在此之前简书还是可以自行把GIF的第一桢当作封面,现在不好使了。

多样性

推特(TWTR.US)的两种性包涵政治和技艺论点、小道音信、科学音讯、音信快报、随想、社交活动布署、课堂、名言警句、学术参考和爱侣笑话。我要好可以控制自己的音信流里各类成分的含量。我不想听到噪音,可是过滤噪音要求注意力。假设您让旁人的饶舌进入你的意识上,这是你自己的权利。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website