【必赢亚洲娱乐】的启动动画,iOS动画系列之七

作者:计算机知识

Twitter的”fave”动画

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

本文由 伯乐在线 - 【必赢亚洲娱乐】的启动动画,iOS动画系列之七。刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎参预翻译组。

当作者第贰次展开 twitter 的时候,就被它的开行动画惊艳到了。但是分析一下以此动画其实也易于落成,于是赶紧做一个出来看看。

来来来,今日大家通过兑现2个像样推特的起步动画来看望CAKeyFrame Animation和CAAnimation Group怎么玩。

Twitter

必赢亚洲娱乐 1

86d6277f9e2f070837f4f132e224b899a901f20b.jpg

Twitter的“fave” 动画

方今 Instagram通过引进壹段新的卡通重新规划了“fave”开关(也叫“fav”)。那段动画并不借助于 CSS transition,而是由一多级图片组成的。下边显示怎么样用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新创建这段动画。

必赢亚洲娱乐 2

故而前日大家的最首要到了第拾章,CAKeyFrame Animation和CAAnimation Group。最终的不行运转动画完全是为着推行一向下探底视CAKeyFrame Animation和CAAnimation Group怎么采取。

简介

推特(TWTR.US)(中文常称为为照片墙),它是美利坚联邦合众国都一个争执网络及搜狐客服务网址。它是博客园客的一流应用。可以让用户写不抢先1三十三个字符的“推文”。Instagram是2个相当受欢迎的周旋互联网及和讯客服务的网址,允许用户将协调的近年动态和设法以移动电话中的短音讯格局(推文)发表。

移动产生的错觉

那段动画的功能类似于旁观古老的西洋镜,该装置显示的是一名目大多一连的缠绕着圆筒的插画。在上边包车型大巴言传身教中,大家不应用圆筒,而是在某些成分内部展现壹多元图片。

  • 铺排3个与 LaunchScreen 同样的分界面
  • 让视图中间的 图标 先收缩后加大直至盖满整个显示屏
  • Logo 在加大进程中国和东瀛益变透明
  • Initial View Controller 的内容有点放大后苏醒原状

有读者私行说更新速度太慢了。在码云上看了一下下载的总括,发现实际下载的童鞋并不是越来越多。要是只是看看思路,只怕复习一下那几个基础知识,确实是十分的快。不过只要对于那些内容不是特意熟稔,建议如故敲1边代码,看看自身能遇到什么坑。

Twitter素养

Instagram影响着大批人的生存,小到柴米油盐,大到国际家政治都能在地点发现,每一个人都在发布自身的意见,观点,使得它像是一份“报纸”,而人们都能够成为报刊文章的编辑,也正因如此,在使用时,大家更应爱护团结的素养,使它能确实成为风靡社区的巩固器。我们要在网络生活中更合理的施用Instagram,无论是分享音信照旧简单的丰硕话题标签,使和谐不停成长,能推出越多更有价值的新闻,使和谐有价值的事物能获得越多的放手。

示例

把鼠标悬停在个别上就能够看来动画效果(请到原文翻开动画效果——译者注)。

在本示例中,大家将从营造一多种能结合动画的图形起先。在那边,我们运用来源 Facebook 的“fave”图标动画的某些图片集:

必赢亚洲娱乐 3

为了能让这一个帧动起来,大家须求把它们放置在1排上。在那么些文件中,那个帧已经排列在壹排上了,那象征我们能够通过安装背景地点(background-position)属性使背景从第二帧过渡到结尾一帧。

必赢亚洲娱乐 4

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

我写壹篇分享小说大概要四~几个钟头,大意是3局地:想到合适的例证,敲代码写注释,写小说。平日都会看本身眼下的情状,决定是先写swift版依然OC版,然后不动脑子的翻译成此外1版调整一下BUG。那样也是为着练习自个儿,前些日子发现本人有时候会不自觉的把两种语言混在共同,那些习惯尤其不好,所以想用那种办法自身修正一下。到结尾更新写小说的时候反而更自在了,因为不用动脑。哈哈~

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

Steps() 时序函数

大部的时序函数,例如 ease(缓冲)和 cubic-bezier(2遍贝塞尔),都能让要素从初始状态平滑地对接到最后状态。steps 时序函数与此分裂,它并不是一马平川地连贯,而是将连接进程分割为自然数额的步调,并且在这个手续之间快捷地活动。

必赢亚洲娱乐 5

作者们先制造如下的 HTML 代码:

XHTML

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

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

是因为前边需求让 logo 变透明,我们挑采用 mask 来实现。

Come on~下边那张图纯粹是为着简书当作封面使用的。也不清楚怎么,以前简书仍是能够自行把GIF的率先桢当作封面,今后不好使了。

多样性

推特(TWTR.US)的多种性包蕴政治和技巧论点、谬种流传、科学新闻、信息快报、杂谈、社交活动安插、课堂、名言警句、学术参考和爱侣笑话。笔者要好能够调整自个儿的新闻流里种种成分的含量。小编不想听到噪音,不过过滤噪音须求专注力。假如您让别人的唠叨进入你的发现上,那是您自身的权力和义务。

背景图片

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

必赢亚洲娱乐 6

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

加了停止状态后,1旦鼠标悬停在该因素上,背景就会从大家钦定的职位移动到那1密密麻麻图片中最终一张的地方上(为了协作浏览器,注意要加上相应的浏览器内核前缀——译者注)。

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帧组成的。

当我们将鼠标悬停在这几个因素上时,所看到的职能是其背景图片通过5三个一样的步调经历了一回对接。

其它这一个案例,也得以用 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

CAKeyFrame Animation和CAAnimation Group.png

互惠性

人人无需付费提供并索取须要的音信。·通向多种公共空间的水道:作者是四个传播者,小编要求培养并追加自个儿的听众群众体育。小编能够在几分钟内宣布壹本新书大概新录制——各样关切本人的观者都恐怕把这些弥母推送到他们的网络。

本文由bwin必赢发布,转载请注明来源

关键词: HTML5 动画 Twitter iOS动画 iOS Apprenti