JazzHands 是一个帧动画的库,我们可以结合 Gesture,scrollView,KVO,RAC 制作交互式的动画.
它特别适合使用在 App 的介绍界面上.
jazzhands-demo.gif
if-intro.gif
EYunDa.gif
Savr-Intro-Screen.gif
talkIntro.gif
前两个是 JazzHands 的Demo 和作品
后面3个分别是:
Savr-Intro-Screen
Intro-Guide-View-for-Talk.ai
"E运达" app
支持的动画类型
- IFTTTAlphaAnimation 透明度,内部修改 alpha属性
- IFTTTRotationAnimation 旋转角度,内部修改 view.transform 属性
- IFTTTBackgroundColorAnimation 背景色
- IFTTTCornerRadiusAnimation 圆角大小
- IFTTTHideAnimation 显示隐藏,内部调用 view.hidden=YES
- IFTTTScaleAnimation 内部修改 view.transform属性
- IFTTTTranslationAnimation 内部修改 view.transform属性
- IFTTTTransform3DAnimation 内部修改 layer.transform 属性
- IFTTTTextColorAnimation 修改 Label 的 textColor
- IFTTTFillColorAnimation CAShaperLayer 的 fillColor 属性
- IFTTTStrokeStartAnimation 修改 CAShapeLayer 的 strokeStart
- IFTTTStrokeEndAnimation 修改 CAShapeLayer 的 strokeEnd ,不能同时设置strokeEnd和 strokeStart动画
- IFTTTPathPositionAnimation 修改 UIView 的 Position 属性
AutoLayout 特有
- IFTTTConstraintConstantAnimation 修改 AutoLayout Constraint的 constant 属性
- IFTTTConstraintMultiplierAnimation 修改 AutoLayout Multiplier 属性,
- IFTTTScrollViewPageConstraintAnimation 用 AutoLayout 修改 ScrollView 和 View 的位置关系
Frame 果你用 AutoLayout 就不能用这个动画修改 Frame 属性
- IFTTTFrameAnimation 修改 View 的 frame 属性.
JazzHands - Hello World
先来做一个最基本的平移,透明度动画
helloworld.gif
开始
新建一个工程,在 ViewController 导入头文件
#import <IFTTTJazzHands.h>
在 ViewController.m 加入
@interface ViewController ()<UIScrollViewDelegate>
@property (strong, nonatomic) UIScrollView *scrollView; //和我们交互的scrollView
@property (strong,nonatomic) UIView *v; //蓝色方块 view
@property (strong,nonatomic) IFTTTAnimator *animator; //创建 Animator 来管理页面中的所有动画
@end
在 ViewDidLoad 中初始化
- (void)viewDidLoad {
[super viewDidLoad];
self.animator=[[IFTTTAnimator alloc]init];
//初始化 scrollView
self.scrollView=[[UIScrollView alloc]initWithFrame:self.view.bounds];
self.scrollView.pagingEnabled=YES;
self.scrollView.backgroundColor=[UIColor whiteColor];
self.scrollView.contentSize=CGSizeMake(self.view.boundWidth*PageCount,0);
self.scrollView.delegate=self;
[self.view addSubview:self.scrollView];
//创建蓝色方块 View
self.v=[[UIView alloc]initWithFrame:CGRectMake(100,200, ViewSize, ViewSize)];
self.v.backgroundColor=[UIColor blueColor];
[self.scrollView addSubview:self.v];
[self setupAnimation];
}
上面都是我们熟悉的初始化操作,接下来该实现动画了
-(void)setupAnimation{
//创建一个透明度动画
IFTTTAlphaAnimation *alpha=[IFTTTAlphaAnimation animationWithView:self.v];
//将所有动画添加到 animator 中
[self.animator addAnimation:alpha];
//添加2个帧,在 scrollView 从 0 滚动到 200 时, 淡出我们的 View
[alpha addKeyframeForTime:0 alpha:1.0];
[alpha addKeyframeForTime:200 alpha:0.0];
//创建平移动画
IFTTTTranslationAnimation *tran=[IFTTTTranslationAnimation animationWithView:self.v];
[self.animator addAnimation:tran];
//添加2个帧,在 scrollView 从 0 滚动到 200 时, view 沿X轴平移150,沿Y便宜60.
[tran addKeyframeForTime:0 translation:CGPointMake(0, 0)];
[tran addKeyframeForTime:200 translation:CGPointMake(150, 60)];
}
我们创建完动画,并将它添加到 Animator 中,现在我们要把 scrollView 和 Animator 关联起来,当 scrollView 滚动时,产生相应的动画
在 scrollView的代理方法中
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
[self.animator animate:scrollView.contentOffset.x];
}
这样在我们滑动 scrollView 时, 根据滑动距离,scrollView.contentOffset.x 从0变化到200,我们的蓝色方块View 产生淡出, 偏移的动画.
Done
所有代码你可以在 Github 中找到
在 下一篇 中我们自己实现简聊 App的Guide 动画
