菜单

出手达成 Facebook 的起步动画

2019年9月16日 - Bootstrap

运动产生的错觉

这段动画的法力类似于观察古老的西洋镜,该装置显示的是一文山会海三翻五次的拱卫着圆筒的插图。在底下的演示中,我们不行使圆筒,而是在有个别成分内部呈现一层层图片。

棒,第一步成功。

“steps()”的别的用法

背景动画Smart(background sprites)仅仅只是 steps
时序函数的用法之一。除了那个之外该函数还适用于构建其他需求一多元离散步骤的卡通。举个例子,你能够用该函数制作几个摆钟。

图片 1

至于作者:刘健超-J.c

图片 2

前端,在路上…http://jchehe.github.io
个人主页
·
作者的小说
·
19
·
    

图片 3

好了,小鸟出来了。

打赏援助自个儿翻译越来越多好小说,多谢!

任选一种支付格局

图片 4
图片 5

赞 收藏
评论

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

Twitter的“fave” 动画

多年来 脸谱通过引进一段新的卡通片重新设计了“fave”按键(也叫“fav”)。这段动画并不依赖CSS transition,而是由一多元图片组成的。上边展现什么用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新制作这段动画。

图片 6

Twitter的”fave”动画

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

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

这里大家用
CAKeyframeAnimation,让这些缩放动作一气浑成。设置好起头时间、持续时间和一一关键帧,最后让它保持动画最终的图景。

背景图片

接下去, 我们能够增加一些体裁并安装背景图片地点:

图片 7

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;
  }
}

请留心第二个法规 animation。在本例中,我们应用 steps
时序函数,让background-position 属性经历了贰个持续时间为1秒的连接。在
steps 部分的“55”那一个值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在这么些因素上时,所见到的功效是其背景图片通过53个一律的步子经历了二遍对接。

除此以外那么些案例,也足以用 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);
}

图片 8

干什么不应用gif?

就算如此也足以使用 gif 动画,但在这么些案例中并非很适用。gif
文件的尺寸日常十分的大并且帧速率也难以决定。而选用这几个点子,大家就足以用 CSS
对那么些动画进行结束、倒回以及美妙绝伦的调动。

当自家首先次张开 twitter
的时候,就被它的运维动画惊艳到了。可是解析一下以此动画其实也不难达成,于是神速做八个出来看看。

Steps() 时序函数

大多数的时序函数,举个例子 ease(缓冲)和
cubic-bezier(二遍贝塞尔),都能让要素从开端状态平滑地接通到结尾状态。steps
时序函数与此差异,它而不是平缓地衔接,而是将衔接进度分割为一定数额的步子,况兼在这么些步骤之间赶快地移动。

图片 9

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

XHTML

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

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

拆分完事后就好办咯,一步步来达成啊~

示例

把鼠标悬停在有限上就足以看看动画效果(请到原文查看动画效果——译者注)。

在本示例中,大家将从构建一密密麻麻能结合动画的图片初始。在那边,大家应用来源
推特 的“fave”Logo动画的片段图片集:

图片 10

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

图片 11

备忘小条

假诺您欣赏这篇小说,你能够将它分享在推特,或许封存上面包车型地铁备忘小条,以便参照他事他说加以考察。

图片 12

打赏支持笔者翻译更加的多好小说,谢谢!


打赏译者

这几个算好渐变透明的时刻就好。

Done.

UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: { shelterView.alpha = 0}) {  in shelterView.removeFromSuperview() view.layer.mask = nil}
let mainViewAnimation = CAKeyframeAnimation(keyPath: "transform")mainViewAnimation.beginTime = CACurrentMediaTime() + 1.1mainViewAnimation.duration = 0.6mainViewAnimation.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
let shelterView = UIView(frame: view.frame)shelterView.backgroundColor = .whiteview.addSubview(shelterView)window!.backgroundColor = UIColor(red: 29 / 255.0, green: 161 / 255.0, blue: 242 / 255.0, alpha: 1)
let logoAnimation = CAKeyframeAnimation(keyPath: "bounds")logoAnimation.beginTime = CACurrentMediaTime() + 1logoAnimation.duration = 1logoAnimation.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 = falselogoAnimation.fillMode = kCAFillModeForwardslogoLayer.add(logoAnimation, forKey: "zoomAnimation")

图片 13

又好了。

出于前面须要让 logo 变透明,大家采纳用 mask 来贯彻。

图片 14

道理跟第二步一样,就隐瞒了~

图片 15

但一最初那一个 logo 并非透明的,于是先在其上盖一层黑色的
view,并改一下背景颜色吗。

Github: TwitterLauncher

相关文章

发表评论

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

网站地图xml地图