澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

开首完结 推特 的起步动画
分类:网页制作

Twitter的”fave”动画

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

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

当小编第贰遍展开 twitter 的时候,就被它的起步动画惊艳到了。然则分析一下以此动画其实也轻易完成,于是赶紧做一个出去看看。

澳门太阳娱乐集团官网,来来来,后天咱们通过落实三个类似推特的起步动画来拜望CAKeyFrame Animation和CAAnimation Group怎么玩。

Twitter的“fave” 动画

近年 推特通过引进一段新的卡通片重新设计了“fave”开关(也叫“fav”)。这段动画并不借助 CSS transition,而是由一雨后苦笋图片组成的。下边体现怎么样用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新成立这段动画。

澳门太阳娱乐集团官网 1

为以前几天大家的严重性到了第七章,CAKeyFrame Animation和CAAnimation Group。最终的非常运转动画完全部都以为了实践一向下探底视CAKeyFrame Animation和CAAnimation Group怎么使用。

活动爆发的错觉

这段动画的效率类似于观望古老的西洋镜,该装置呈现的是一密密麻麻三番五次的拱卫着圆筒的插画。在底下的亲自去做中,大家不使用圆筒,而是在有些成分内部显示一多级图片。

  • 布置八个与 LaunchScreen 一样的分界面
  • 让视图中间的 Logo 先裁减后加大直至盖满整个显示屏
  • 图标 在加大进程中稳步变透明
  • Initial View Controller 的从头到尾的经过有一点放大后恢复生机原状

有读者私下说更新速度太慢了。在码云上看了须臾间下载的总结,开掘实际上下载的童鞋并非特意多。如若只是看看思路,可能复习一下这么些基础知识,确实是一点也不慢。不过倘诺对于这么些剧情不是特意熟练,提议照旧敲一边代码,看看本身能超过什么坑。

示例

把鼠标悬停在个别上就足以见见动画效果(请到原文查阅动画效果——译者注)。

在本示例中,大家将从创设一类别能整合动画的图形早先。在这里,我们使用来源 Twitter 的“fave”Logo动画的一些图片集:

澳门太阳娱乐集团官网 2

为了能让这几个帧动起来,大家必要把它们放置在一排上。在那么些文件中,这个帧已经排列在一排上了,这象征大家得以由此设置背景地方(background-position)属性使背景从第一帧过渡到最终一帧。

澳门太阳娱乐集团官网 3

拆分完之后就好办咯,一步步来兑现吗~

咱写一篇共享小说差相当少要4~6个小时,概略是三片段:想到合适的例证,敲代码写注释,写小说。平时都会看自身眼下的境况,决定是先写swift版依然OC版,然后不动脑子的翻译成另外一版调治一下BUG。那样也是为了训练本人,近年来开采自身不常候会不自觉的把两种语言混在联合签字,这一个习于旧贯特别不佳,所以想用这种措施本人勘误一下。到终极更新写文章的时候反而更轻易了,因为不用动脑。哈哈~

Steps() 时序函数

绝大好多的时序函数,比如 ease(缓冲)和 cubic-bezier(三遍贝塞尔),都能让要素从早先状态平滑地联网到终极状态。steps 时序函数与此差别,它实际不是坦荡地衔接,而是将连通进程分割为一定数额的步调,何况在那个步骤之间相当的慢地活动。

澳门太阳娱乐集团官网 4

大家先成立如下的 HTML 代码:

XHTML

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

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

鉴于前边须要让 logo 变透明,大家选择用 mask 来落到实处。

Come on~下边那张图纯粹是为着简书当作封面使用的。也不知情为啥,从前简书还是能够半自动把GIF的率先桢当作封面,未来倒霉使了。

背景图片

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

澳门太阳娱乐集团官网 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;
  }
}

请小心第4个准绳 animation。在本例中,大家接纳 steps 时序函数,让background-position 属性经历了多少个持续时间为1秒的交接。在 steps 部分的“55”这一个值,代表了这段动画是由55帧组成的。

当大家将鼠标悬停在这一个因素上时,所阅览的功力是其背景图片通过伍12个一律的步骤经历了一遍对接。

除此以外那些案例,也能够用 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

为啥不应用gif?

虽说也得以利用 gif 动画,但在那一个案例中实际不是很妥帖。gif 文件的高低经常很大并且帧速率也不便决定。而接纳这几个格局,大家就能够用 CSS 对这几个动画进行悬停、倒回以及各种各样的调动。

澳门太阳娱乐集团官网 6

上面突显一下写完事后的收获:

“steps()”的别样用法

背景动画Smart(background sprites)仅仅只是 steps 时序函数的用法之一。除却该函数还适用于创设其余索要一多种离散步骤的动画。举个例子,你能够用该函数制作四个摆钟。

好了,小鸟出来了。

ani.gif

备忘小条

即便你欣赏这篇小说,你能够将它分享在Facebook,只怕封存上面的备忘小条,以便参考。

澳门太阳娱乐集团官网 7

打赏辅助本身翻译越来越多好文章,多谢!

打赏译者

但一开首那些 logo 并非晶莹的,于是先在其上盖一层玉米黄的 view,并改一下背景颜色吗。

源代码能够在这里下载,里面有OC和斯维夫特两版。https://git.oschina.net/atypical/CAKeyFrame-_Group_Animation.git

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

任选一种支付办法

澳门太阳娱乐集团官网 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)

iOS动画种类之CAKeyFrame Animation和CAAnimation Group(OC和斯威夫特两版)

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

澳门太阳娱乐集团官网 10

前端,在路上... 个人主页 · 笔者的小说 · 19 ·     

澳门太阳娱乐集团官网 11

澳门太阳娱乐集团官网 12

1. CAKeyframeAnimation

CAKeyframeAnimation是CApropertyAnimation的子类,跟CABasicAnimation的分别是:CABasicAnimation只好从二个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用多个NSArray保存那个数值。

创办步骤:

  1. 创办首要帧动画对象
  2. 设置属性
  3. 加上到要效果与利益的layer上
  • 只要使用rect椭圆的诀要,动画会不连贯,停顿一下。原因是因为矩形的周长比椭圆的长,动画路线依据椭圆试行完今后,必要等待一下最大周长走完。
    这几个都以因为总结格局形成的。

棒,第一步成功。

1.1 创立五个震荡的小方块

作者们用三个简约的demo来感受一下CAKeyframeAnimation,来做三个会抖动的小方块。

振动的小方块.gif

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
//设置一些列的关键帧动画
    animation.values = @[@(-M_PI_4 / 5),@(M_PI_4 / 5),@(-M_PI_4 / 5)];
    animation.repeatCount = CGFLOAT_MAX;
    [self.view.layer addAnimation:animation forKey:@"rotation"];

此地大家用 CAKeyframeAnimation,让这一个缩放动作一挥而就。设置好初阶时间、持续时间和一一关键帧,最终让它保持动画最终的情况。

1.2 创设三个沿椭圆路线运动的小飞机

作者们创设二个UIBezierPath,让小飞机沿着这些路子运动。

//创建动画对象
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设置属性:创建beziper路径,并把路径作为运动轨迹
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 500)];
    keyFrameAnimation.path = bezierPath.CGPath;
//设置动画时间
    keyFrameAnimation.duration = 2;
//设置动画循环播放的次数
    keyFrameAnimation.repeatCount = CGFLOAT_MAX;
//设置动画的计算模式
    keyFrameAnimation.calculationMode = kCAAnimationPaced;

//将动画添加到layer上
    [self.planeView.layer addAnimation:keyFrameAnimation forKey:nil];
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")

1.3 动画叠合

刚刚增添了三个顺着路线运动的飞行器,我们还要还足以给飞机再把抖动的极度动画也助长上去。前几篇涉嫌后边那些forKey,只怕还恐怕有童鞋不知情干啥用。今后收看了木有?叁个layer里面好些个少个卡通,如何找到呼应的卡通片吶?今后通过这几个key就能够找到了。

    //        为小飞机同时添加抖动的动画和椭圆路径旋转的动画
    [self.planeImageView.layer addAnimation:[self shakeAni] forKey:nil];
    [self.planeImageView.layer addAnimation:[self ovalAni] forKey:nil];

澳门太阳娱乐集团官网 13

2. CAAnimationGroup

纯净的动画在实际上中多次是不可能满意必要的,那时就必要用到动画组。

  • 是CAAnimation的子类
  • 能够保存一组动画对象,将CAAnimationGroup对象参与图层后,组中全体动画对象足以况兼现身运转.

我们试着做一个包行旋转、缩放、按自然弧度路线组合在一道的动画片。效果如下:

arcAni.gif

- (CAAnimationGroup *)groupAni{
    //        实例化一个组动画对象
        CAAnimationGroup *groupAni = [[CAAnimationGroup alloc] init];

    //        创建旋转的动画
        CABasicAnimation *basicRotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    basicRotation.toValue = @(M_PI * 2);

    //        创建缩放的动画
        CABasicAnimation *basicScale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basicScale.toValue = @(0.2);

    //        创建按照路径移动的动画
        CAKeyframeAnimation *keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:150 startAngle:0 endAngle:M_PI * 2 clockwise:YES];

    keyFrameAni.path = arcPath.CGPath;
    keyFrameAni.calculationMode = kCAAnimationPaced;
    keyFrameAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    //        将旋转、缩放、移动的动画添加到组动画中
    groupAni.animations = @[basicRotation,basicScale,keyFrameAni];
    //        组动画重复次数
        groupAni.repeatCount = CGFLOAT_MAX;
    //        组动画时长
        groupAni.duration = 2;

    return groupAni;
}

又好了。

3. 达成类似推特的运维动画

本条算好渐变透明的时刻就好。

3.1达成思路

1,在View上设置两个事物能够遮挡住背景图;
2,把遮罩变成五角星;
3,让遮罩慢慢变大,中间可知区域更大。

yes!思路就是这么的。那怎么遮住背景图片呢?

UIView.animate(withDuration: 0.3, delay: 1.4, options: .curveLinear, animations: { shelterView.alpha = 0}) {  in shelterView.removeFromSuperview() view.layer.mask = nil}

3.2 CALayer的遮罩属性

CALayer自个儿有三个属性,叫mask。大家来看一下合法解释:

@property(nullable, strong) CALayer *mask;

When true an implicit mask matching the layer bounds is applied to
the layer (including the effects of the `cornerRadius' property). If
both `mask' and `masksToBounds' are non-nil the two masks are
multiplied to get the actual mask values. Defaults to NO.
Animatable.

它就像是于一个子图层,相对于父图层(即怀有该属性的图层)布局,可是它却不是三个普普通通的子图层。分化于其余能够在父图层中绘制出图像的子图层,mask图层定义了父图层的一对可知区域。

mask图层的Color属性是置之不顾的,真正关键的是图层的概略。也正是说mask图层实心的有的会被封存下去,别的的则会被甩掉。借使mask图层比父图层要小,独有在mask图层里面包车型的士原委才是它关怀的,除此以外的凡事都会被隐形起来。

Paste_Image.png

澳门太阳娱乐集团官网 14

3.3 达成类似推特(TWTR.US)的起步动画

好了预备干活都做完了,我们就从头写那一个动画了。那几个动画其实正是贰个总结的CAKeyframeAnimation。设置了三个重中之重帧动画的分寸,以及那七个关键帧的移位节奏。

然后,就好啦~然后,就好啦~然后,就好啦~然后,就好啦~

哪尼?!!!就这样?!!对啊,就这样。

 - (CAKeyframeAnimation *)maskAni{
 //        放大缩小视图,keypath使用bounds
 CAKeyframeAnimation *maskAni = [CAKeyframeAnimation animationWithKeyPath:@"bounds"];
 //        动画时间
 maskAni.duration = 30.75;
 //        动画延迟0.5秒播放
 maskAni.beginTime = CACurrentMediaTime() + 0.5;


 //        设置关键帧动画的数值
 CGRect startRect = self.maskLayer.frame;

 CGRect tempRect = CGRectMake(0, 0, 100, 100);

 CGRect finalRect = CGRectMake(0, 0, 2000, 2000);
 maskAni.values = @[[NSValue valueWithCGRect:startRect],[NSValue valueWithCGRect:tempRect],[NSValue valueWithCGRect:finalRect]];


 //        设置关键帧动画的运动节奏
 maskAni.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];


 //        动画播放结束后是否移除动画
 maskAni.removedOnCompletion = NO;

 //        动画填充模式:kCAFillModeForwards:当动画结束后,layer会一直保持着动画最后的状态
 maskAni.fillMode = kCAFillModeForwards;

 return maskAni;


 }

留二个小标题

道理跟第二步同样,就不说了~

自家在OC和斯维夫Terry面前境遇分化的View使用了mask。二个是给背景图片的UIImageView设置了mask,另贰个是一向给Controller的View设置了mask。设置这一个有神马差距咩?

好,下篇其实有多个重头,正是CAShapeLayer。因为在专门的学业中境遇的大多数卡通都以通过UIView的动画block实现,别的都大致都以索要用到CAShapeLayer。大家后一次玩点有趣的吧~
比如还恐怕有意思味,能够看看本系列的其余小说哈。

-----------------------华丽分水岭,iOS动画种类全集链接-------------------------------------------------
第一篇:iOS动画种类之一:通超过实际战学习CALayer和透视的原理。做贰个带时分秒指针的时钟动画(上)
其次篇:iOS动画种类之二:通超过实际战学习CALayer和透视的准则。做贰个带时分秒指针的时钟动画。包蕴了OC和Swift二种源代码(下)
其三篇:iOS动画类别之三:Core Animation。介绍了Core Animation的常用属性和办法。
第四篇:CABasic Animation。iOS动画体系之四:基础动画之平移篇
第五篇:CABasic Animation。iOS动画种类之五:基础动画之缩放篇&旋转篇
第六篇:iOS动画体系之六:利用CABasic Animation完结推动画特效的登入分界面
第七篇:iOS动画种类之七:完成类似推特的启航动画
第八篇:iOS动画连串之八:使用CAShapeLayer美术动态流量图
第九篇:iOS动画种类之九:完成点赞的动画及广播起伏提醒器
第十篇:实战连串:绘制过山车气象

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

澳门太阳娱乐集团官网 15

Done.

Github: TwitterLauncher

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:开首完结 推特 的起步动画

上一篇:没有了 下一篇:Web前端优化最佳实践及工具集锦
猜你喜欢
热门排行
精彩图文