xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > Twitter的”fave”动画

Twitter的”fave”动画

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-21 16:52

Twitter的”fave”动画

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

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

当我第一次打开 twitter 的时候,就被它的启动动画惊艳到了。然而分析一下这个动画其实也不难实现,于是赶紧做一个出来看看。

Twitter的“fave” 动画

最近 Twitter 通过引入一段新的动画重新设计了“fave”按钮(也叫“fav”)。这段动画并不依赖 CSS transition,而是由一系列图片组成的。下面展示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

图片 1

运动产生的错觉

这段动画的效果类似于观看古老的西洋镜,该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中,我们不使用圆筒,而是在某个元素内部呈现一系列图片。

  • 布置一个与 LaunchScreen 相同的界面
  • 让视图中间的 Logo 先缩小后放大直至盖满整个屏幕
  • Logo 在放大过程中逐渐变透明
  • Initial View Controller 的内容稍微放大后恢复原状

示例

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

在本示例中,我们将从制作一系列能组成动画的图片开始。在这里,我们使用来自 Twitter 的“fave”图标动画的部分图片集:

图片 2

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

图片 3

拆分完之后就好办咯,一步步来实现吧~

Steps() 时序函数

大多数的时序函数,例如 ease(缓冲)和 cubic-bezier(三次贝塞尔),都能让元素从初始状态平滑地过渡到最终状态。steps 时序函数与此不同,它并不是平滑地过渡,而是将过渡过程分割为一定数量的步骤,并且在这些步骤之间快速地移动。

图片 4

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

XHTML

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

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

由于后面需要让 logo 变透明,我们选择用 mask 来实现。

背景图片

接下来, 我们可以添加一些样式并设置背景图片位置:

图片 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);
}
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

为什么不使用gif?

虽然也可以使用 gif 动画,但在这个案例中并不是很合适。gif 文件的大小通常较大并且帧速率也难以控制。而使用这个方式,我们就可以用 CSS 对这个动画进行停止、倒回以及各种各样的调整。

图片 6

“steps()”的其它用法

背景动画精灵(background sprites)仅仅只是 steps 时序函数的用法之一。除此之外该函数还适用于制作任何需要一系列离散步骤的动画。例如,你可以用该函数制作一个摆钟。

好了,小鸟出来了。

备忘小条

如果你喜欢这篇文章,你可以将它分享在Twitter,或者保存下面的备忘小条,以便参考。

图片 7

打赏支持我翻译更多好文章,谢谢!

打赏译者

但一开始这个 logo 并不是透明的,于是先在其上盖一层白色的 view,并改一下背景颜色吧。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 8 图片 9

赞 收藏 评论

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)

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

图片 10

前端,在路上... 个人主页 · 我的文章 · 19 ·     

图片 11

图片 12

棒,第一步完成。

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:Twitter的&#8221;fave&#8221;动画

关键词:

上一篇:旁人家的面试题:总计“1”的个数

下一篇:没有了