美文网首页iOS Developer程序员
JHChainableAnimations 动画链(翻译)

JHChainableAnimations 动画链(翻译)

作者: DOC_XHUAN | 来源:发表于2016-07-20 18:07 被阅读0次

https://github.com/jinjiantong/JHChainableAnimations

动画怎么了?

虽然CAAnimations和UIView的动画功能已经十分强大了,但它们还是在将多组动画串连在一起这个问题上捉襟见肘,尤其是在改变关键点(anchor points字面意思锚点)的时候。

此外,复杂的动画可读性差。

假如我要将myView使用弹簧效果向右移动五十个像素,在移动完成时,使用淡入改变myView的背景色:

老方法

[UIViewanimateWithDuration:1.0

delay:0.0

usingSpringWithDamping:0.8

initialSpringVelocity:1.0

options:0 animations:^{CGPointnewPosition = self.myView.frame.origin;

newPosition.x +=50;

self.myView.frame.origin = newPosition;

}completion:^(BOOLfinished) {

[UIViewanimateWithDuration:0.5

delay:0.0

options:UIViewAnimationOptionCurveEaseInanimations:^{

self.myView.backgroundColor= [UIColorpurpleColor];

}completion:nil];

}];

真是够了。。。使用JHChainableAnimations仅仅只要一行代码。

新方法(JHChainableAnimations!!!)

self.myView.moveX(50).spring.thenAfter(1.0).makeBackground([UIColorpurpleColor]).easeIn.animate(0.5);

目前已经存在不少的相当不错的动画库,例如:RBBAnimation,DCAnimationKit, 和PMTween。但它们在链型动画和读写代码的简便性上没有好的表现。

用法

复制JHChainableAnimations里面的文件添加到你的项目,或将下面的内容添加到你的Podfile

pod 'JHChainableAnimations', '~> 1.3.0'

然后import下面的头文件

#import"JHChainableAnimations.h"

这是UIView的分类,所以链型动画可以在所有导入了上面头文件的UIView及其子类上使用。

动画

moveX(x)这类链接属性必须放在view和animate(t)方法间。

以下例子展示了怎样将一个对象尺寸放大两倍的1秒动画。

View.makeScale(2.0).animate(1.0);

如果你想在缩放同时移动view,添加另外一个链接属性。顺序不重要。

View.makeScale(2.0).moveXY(100,50).animate(1.0);//等同于view.moveXY(100,50).makeScale(2.0).animate(1.0);

查看所有的链性属性点击here

链接动画

使用thenAfter(t)函数来分隔动画函数实现连接动画。

以下例子展示了怎么在一个对象完成了0.5秒的缩放动画之后完成1秒的移动动画。(暂时还没有写demo来试过,可能具体的动画效果不是这样)

View.makeScale(2.0).thenAfter(0.5).moveXY(100,50).animate(1.0);

动画效果

想要添加动画效果,在你想要应用动画效果的链性属性后调用效果方法。

以下例子展示了一个弹簧效果的的缩放。

View.makeScale(2.0).spring.animate(1.0);

如果给同一的链性属性添加相同的动画,第二个将会关闭第一个。

View.makeScale(2.0).bounce.spring.animate(1.0);//等同于view.makeScale(2.0).spring.animate(1.0);

查看所有的动画效果点击here

延迟

调用wait(t)或delay(t)链性属性来

以下例子展示了如何延迟0.5秒执行移动视图通话。

View.moveXY(100,50).wait(0.5).animate(1.0);//等同于view.moveXY(100,50).delay(0.5).animate(1.0);

完成

给UIView的animationCompletion属性赋值或者调用animateWithCompletion(t,completion)函数可在动画完成后运行需要的代码。

View.makeX(0).animateWithCompletion(1.0,JHAnimationCompletion(){

NSLog(@"Animation

Done");

});

等同于:

View.animationCompletion =

JHAnimationCompletion(){

NSLog()@"Animation

Done";

}

View.makeX(1).animate(1.0);

等同于:

View.makeX(0).animate(1.0).animationCompletion

= JHAnimationCompletion() {

Nslog(@"Animation

Done");

}

贝赛尔曲线

你也可以UIBezierPath来设置view的动画。调用bezierPahtForAnimation方法,得到一个以视图为位置为起点的贝赛尔曲线。给它添加点、曲线、直线然后在一个链性属性上使用。

UIBezierPath*path = [view bezierPathForAnimation];

[path

addLineToPoint:CGPintMake(24,400)];

[paht

addLineToPoint:CGPintMake(300,500)];

View.moveOnPath(path).animate(1.0);

动画效果无法用在贝赛尔曲线路径上。

语意(Semantics不知道怎么翻译好)

我加入了一个叫做seconds仅仅是用来展示的链性属性。不管怎样,给代码添加一点可读性(如果你喜欢的话)。

View.makeScale(2.0).thenAfter(0.5).secends.moveX(20).animate(1.0);//view.makeScale(2.0).thenAfter(0.5).moveX(20).animate;

自动布局

变形

使用变形类的链性属性。对于被自动布局约束的视图,这些是不错的。你不会与其他链性属性混淆。

viewWithConstraints.transformX(50).transformScale(2).animate(1.0);

动画约束

具有代表性的frames设置和自动布局填充不应该混淆,所以在使用makeConstraint和moveConstraint链性属性的时候要小心(不要尝试去缩放视图,当它具有高宽约束的时候)。这些属性应该只用于颜色、透明度、圆角链性属性因为它们不回影响图层的位置,因此不回影响约束。

这些仅仅是为动画约束方便添加的语法结构。以下代码将设置topConstraint的constant为50,隐蔽的驱动动画图层。

// You have a reference to some

constraint for myView

self.topConstraint = [NSLayoutConstraint...];

...

self.myView.makeConstraint(self.topConstraint,50).animate(1.0);

这种代码也不能添加动画效果。

swift中使用

在swift中使用JHChainableAnimaton有一点点的不同。每个链性属性必须在哪名字和参数之间添加()

// swift code

view.makeScale()(2.0).spring().animate()(1.0);

// is the same as

//

view.makeScale(2.0).spring.animate(1.0);

//

in Objective-C

查看更多https://github.com/jinjiantong/JHChainableAnimations

相关文章

网友评论

    本文标题:JHChainableAnimations 动画链(翻译)

    本文链接:https://www.haomeiwen.com/subject/omgvjttx.html