Twitter的”fave”动画

2015/05/12 · 的启动动画,实现类似Twitter的启动动画。HTML5 ·
Twitter,
动画

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

当自家首先次打开 twitter
的时候,就被它的启航动画惊艳到了。然则分析一下这些动画其实也简单完结,于是神速做一个出去看看。

来来来,明日大家通过兑现一个近乎推特(TWTR.US)的开行动画来看望CAKeyFrame
Animation和CAAnimation Group怎么玩。

Twitter

图片 1

86d6277f9e2f070837f4f132e224b899a901f20b.jpg

Twitter的“fave” 动画

近日 推特(TWTR.US)通过引入一段新的卡通重新规划了“fave”按钮(也叫“fav”)。那段动画并不借助于
CSS transition,而是由一多级图片组成的。下边体现如何用 CSS 的
animation-timing-function 属性中的 steps 时序函数(timing
function)重新制作那段动画。

图片 2

于是明天大家的显要到了第七章,CAKeyFrame Animation和CAAnimation
Group。最终的可怜启动动画完全是为着施行一下探视CAKeyFrame
Animation和CAAnimation Group怎么拔取。

简介

推文(Tweet)(中文常称为为推特(TWTR.US)),它是花旗国都一个交道网络及今日头条客服务网站。它是新浪客的超人应用。可以让用户写不当先140个字符的“推文”。推特(TWTR.US)是一个老大受欢迎的应酬互连网及腾讯网客服务的网站,允许用户将协调的近年动态和想方设法以移动电话中的短音信格局(推文)发表。

活动发生的错觉

那段动画的功效类似于观察古老的西洋镜,该装置展现的是一多元再而三的缠绕着圆筒的插画。在下边的言传身教中,咱们不采用圆筒,而是在某个元素内部突显一名目繁多图片。

方方面面动画效果可以拆分为以下几步:

  • 安排一个与 LaunchScreen 相同的界面
  • 让视图中间的 Logo 先缩短后加大直至盖满整个显示屏
  • Logo 在加大进度中渐渐变透明
  • Initial View Controller 的情节有点放大后复苏原状

拆分完将来就好办咯,一步步来落到实处呢~

有读者私下说更新速度太慢了。在码云上看了刹那间下载的总计,发现实际下载的童鞋并不是特意多。如果只是看看思路,或者复习一下这么些基础知识,确实是很快。不过如果对于那个情节不是专门熟习,提出仍然敲一边代码,看看自己能赶上什么样坑。

Twitter素养

推文(Tweet)影响着巨大人的活着,小到柴米油盐,大到国际家政治都能在下边发现,每个人都在公布自己的见识,观点,使得它像是一份“报纸”,而人们都可以成为报章的编者,也正因如此,在使用时,大家更应保护团结的功力,使它能真的成为风靡社区的增强器。大家要在互连网生活中更客观的接纳推文(Tweet),无论是分享新闻或者简单的丰富话题标签,使自己不停成长,能生产越多更有价值的音讯,使自己有价值的东西能取得更加多的放大。

示例

把鼠标悬停在容易上就可以见见动画效果(请到原文翻开动画效果——译者注)。

在本示例中,我们将从制作一密密麻麻能结成动画的图纸开首。在那边,大家使用来源
推特(TWTR.US) 的“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。这样也是为了陶冶自己,前段时间发现自己有时候会不自觉的把三种语言混在一起,那几个习惯尤其不佳,所以想用那种方法自己考订一下。到终极更新写文章的时候反而更轻松了,因为不用动脑。哈哈~

推特的特征(摘取自《网络素养》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的首先桢当作封面,现在糟糕使了。

多样性

推特(Twitter)的多样性包蕴政治和技术论点、一人传虚、科学信息、音讯快报、杂谈、社交活动安顿、课堂、名言名句、学术参考和情人笑话。我自己可以操纵自己的音讯流里种种成分的含量。我不想听到噪音,不过过滤噪音须要注意力。要是你让外人的饶舌进入你的意识上,那是您协调的权利。

网站地图xml地图