菜单

出手达成 推特(TWTR.US) 的起步动画

2019年1月27日 - Html/Html5

Twitter的”fave”动画

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

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

当自身先是次打开 twitter
的时候,就被它的启航动画惊艳到了。不过分析一下那么些动画其实也易于完毕,于是赶紧做一个出来看看。

Twitter的“fave” 动画

多年来 推文(Tweet)通过引入一段新的卡通片重新设计了“fave”按钮(也叫“fav”)。那段动画并不看重CSS transition,而是由一多重图片组成的。上边浮现什么用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新制作那段动画。

图片 1

挪动暴发的错觉

那段动画的功力类似于观望古老的西洋镜,该装置显示的是一密密麻麻延续的环绕着圆筒的插图。在底下的以身作则中,我们不使用圆筒,而是在某个元素内部突显一体系图片。

漫天动画效果可以拆分为以下几步:

拆分完之后就好办咯,一步步来促成啊~

示例

把鼠标悬停在个别上就可以看到动画效果(请到原文查阅动画效果——译者注)。

在本示例中,大家将从制作一多样能整合动画的图样开端。在此处,大家运用来源
推文(Tweet) 的“fave”图标动画的局地图片集:

图片 2

为了能让那几个帧动起来,大家要求把它们放置在一排上。在这么些文件中,这个帧已经排列在一排上了,那意味着大家可以通过安装背景地点(background-position)属性使背景从第一帧过渡到结尾一帧。

图片 3

先布个界面吧

由于前面必要让 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)

棒,第一步成功。

Steps() 时序函数

绝半数以上的时序函数,例如 ease(缓冲)和
cubic-bezier(一回贝塞尔),都能让要素从开端状态平滑地对接到最后状态。steps
时序函数与此不一样,它并不是坦荡地连贯,而是将对接进度分割为自然数量的步骤,并且在这一个手续之间很快地活动。

图片 4

咱俩先创造如下的 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")

又好了。

背景图片

接下去, 咱们可以添加一些体裁并设置背景图片地点:

图片 5

CSS

.fave { width: 70px; height: 50px; background:
url(images/twitter_fave.png) no-repeat; background-position: 0 0; }

1
2
3
4
5
6
.fave {
  width: 70px;
  height: 50px;
  background: url(images/twitter_fave.png) no-repeat;
  background-position: 0 0;
}

加了甘休状态后,一旦鼠标悬停在该因素上,背景就会从大家指定的职分移动到这一多级图片中最终一张的职位上(为了合营浏览器,注意要加上相应的浏览器内核前缀——译者注)。

CSS

.fave:hover{ animation: fave 1s steps(55); } @keyframes fave{ 0%{
background-position:0 0; } 100%{ background-position:-3519px 0; } }

1
2
3
4
5
6
7
8
9
10
11
.fave:hover{
  animation: fave 1s steps(55);
}
@keyframes fave{
  0%{
    background-position:0 0;
  }
  100%{
    background-position:-3519px 0;
  }
}

请留意第1个规则 animation。在本例中,大家运用 steps
时序函数,让background-position 属性经历了一个持续时间为1秒的连结。在
steps 部分的“55”这些值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在那一个因素上时,所观望标意义是其背景图片通过55个一样的步子经历了一遍对接。

其它这几个案例,也得以用 transition 实现:

CSS

.fave:hover { background-position: -3519px 0; transition: background 1s
steps(55); }

1
2
3
4
.fave:hover {
  background-position: -3519px 0;
  transition: background 1s steps(55);
}

顺路把 Logo 透明也带上

其一算好渐变透明的岁月就好。

UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: {
    shelterView.alpha = 0
}) { (_) in
    shelterView.removeFromSuperview()
    view.layer.mask = nil
}

干什么不应用gif?

固然如此也可以运用 gif 动画,但在这么些案例中并不是很体面。gif
文件的大小平时较大并且帧速率也难以控制。而选用那么些形式,大家就可以用 CSS
对那一个动画进行悬停、倒回以及各式各个的调整。

说到底,让开首界面颠一下

道理跟第二步相同,就不说了~

let mainViewAnimation = CAKeyframeAnimation(keyPath: "transform")
mainViewAnimation.beginTime = CACurrentMediaTime() + 1.1
mainViewAnimation.duration = 0.6
mainViewAnimation.keyTimes = [0, 0.5, 1]
mainViewAnimation.values = [NSValue(caTransform3D: CATransform3DIdentity),
                            NSValue(caTransform3D: CATransform3DScale(CATransform3DIdentity, 1.1, 1.1, 1)),
                            NSValue(caTransform3D: CATransform3DIdentity)]
view.layer.add(mainViewAnimation, forKey: "transformAnimation")
view.layer.transform = CATransform3DIdentity

Done.

“steps()”的其他用法

背景动画天使(background sprites)仅仅只是 steps
时序函数的用法之一。除此之外该函数还适用于打造其余索要一层层离散步骤的动画片。例如,你能够用该函数制作一个摆钟。

亟需总体代码的可以来那里下~

Github:
TwitterLauncher

备忘小条

即使您喜欢那篇小说,你可以将它分享在推特(Twitter),或者封存下边的备忘小条,以便参考。

图片 6

打赏接济我翻译越多好小说,谢谢!


打赏译者

打赏协助我翻译越来越多好小说,谢谢!

任选一种支付办法

图片 7
图片 8

赞 收藏
评论

至于小编:刘健超-J.c

图片 9

前端,在路上…http://jchehe.github.io
个人主页
·
我的稿子
·
19
·
    

图片 10

相关文章

发表评论

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

网站地图xml地图