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