的启动动画,iOS动画系列之七

Twitter的”fave”动画

2015/05/12 · HTML5 ·
Twitter,
的启动动画,iOS动画系列之七。动画

本文由 伯乐在线 –
刘健超-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怎么采用。

简介

推特(汉语常称为为推特),它是美利坚联邦合众国都一个顶牛互连网及博客园客服务网站。它是新浪客的独立应用。可以让用户写不领先140个字符的“推文”。推特是一个极度受欢迎的交际互联网及腾讯网客服务的网站,允许用户将协调的近年动态和想法以移动电话中的短音讯方式(推文)宣布。

举手投足发生的错觉

那段动画的功能类似于寓目古老的西洋镜,该装置显示的是一多级延续的拱卫着圆筒的插图。在底下的演示中,我们不使用圆筒,而是在某个元素内部展现一多元图片。

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

  • 布署一个与 LaunchScreen 相同的界面
  • 让视图中间的 Logo 先裁减后加大直至盖满整个屏幕
  • Logo 在推广进程中日渐变透明
  • Initial View Controller 的内容有点放大后恢复生机原状

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

有读者私下说更新速度太慢了。在码云上看了一下下载的总计,发现实际上下载的童鞋并不是尤其多。要是只是探访思路,或者复习一下这个基础知识,确实是很快。可是只要对于那些内容不是专程熟知,提出仍然敲一边代码,看看自己能蒙受什么坑。

Twitter素养

推文(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。那样也是为了陶冶自己,前段时间发现自己有时候会不自觉的把二种语言混在同步,这些习惯越发糟糕,所以想用那种艺术自己校订一下。到结尾更新写小说的时候反而更自在了,因为不用动脑。哈哈~

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

Steps() 时序函数

绝超过一半的时序函数,例如 ease(缓冲)和
cubic-bezier(三回贝塞尔),都能让要素从起先状态平滑地衔接到结尾状态。steps
时序函数与此不一样,它并不是平缓地对接,而是将连通进程分割为一定数额的步调,并且在这么些步骤之间飞速地运动。

图片 5

ca88手机版 ,我们先创制如下的 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地图