从JazzHands到RazzleDazzle — — IFTTT的艺术画板

iOS设计不断趋于标准化，设计师们发挥的空间也收了很大的限制。唯独引导页动画是设计师们可以天马行空的场所。这篇文章里想要介绍IFTTT团队带给我们的两个非常优秀的框架JazzHand与RazzleDazzle（基于关键帧的动画框架）。某种程度上这两个框架的使用甚至比一些专业的动画工具还要简单，设计师完全可以自己上手在Xcode上尝试自己的想法。本文里会提供两个实际项目中的使用案例供大家参考。

制作一个引导页动画，你需要做的只有简单的三步两个步骤：

1. 诞生一个创意(想法)
2. 设计每一个元素(设计)
3. 放置每页中需要显示的内容(设计+开发)
4. 实现动画效果(设计+开发)

JazzHands和RazzleDazzle可以完美实现第3第4步。

JazzHands

JazzHands可支持的动画类型如下：

• IFTTTAlphaAnimation animates the alpha property (creates fade effects).
• IFTTTAngleAnimation animates a rotation transform (for rotation effects).
• IFTTTColorAnimation animates the backgroundColor property.
• IFTTTConstraintsAnimation animates AutoLayout constraint constants.
• IFTTTCornerRadiusAnimation animates the layer.cornerRadius property.
• IFTTTFrameAnimation animates the frame property (moves and sizes views).
• IFTTTHideAnimation animates the hidden property (hides and shows views).
• IFTTTScaleAnimation applies a scaling transform (to scale view sizes).
• IFTTTTransform3DAnimation animates the layer.transform property (for 3D transforms).

这里重点说明几个关键动画的实现方法

IFTTTFrameAnimation

frame animation是最核心的动画效果，在page的变化过程中将指定view从一个frame转移到另一frame，同时包含了位置与大小的变化。

下列代码中演示的是在ScrollView从page1到page2的过程中，对myVoice这个UIViewImage设置frame动画。其中，最后两行针对两个关键帧设置了view在此关键帧的位置，JazzHands会完成中间的过渡。

IFTTTFrameAnimation *myVoiceFrameAnimation = [IFTTTFrameAnimation new];
myVoiceFrameAnimation.view = self.myVoice;
[self.animator addAnimation:myVoiceFrameAnimation];
[myVoiceFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1)                                                   andFrame:self.myVoice.frame]];
[myVoiceFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andFrame:CGRectOffset(self.myVoice.frame, timeForPage(3), 0)]];

IFTTTAlphaAnimation

第二个比较实用的是透明度动画，因为在实际运用中经常会需要淡入淡出之类的效果。

也是同样的原理，在关键帧设置view的透明度，下面的示例代码中在page1设置为不透明，在page2中设置为完全透明，所产生的效果就是在从第一页滑动到第二页时，view将产生淡出的动画。

[titleView1AlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andAlpha:1.0f]];
[titleView1AlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andAlpha:0.0f]];

混合动画

当在动画中需要产生这样的效果：view1（苹果）逐渐变化为view2（香蕉）。这个时候就可以将IFTTTFrameAnimation与IFTTTAlphaAnimation混合使用。

具法做法的程序如下，例子中通过frame与alpha动画的混合使用，产生redPoint与pdfIcon两个UIImageView变换的动画效果：

[redPointFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andFrame:self.redPoint.frame]]; 
[redPointFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andFrame:self.pdfIcon.frame]];
[redPointAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andAlpha:1.0f]];
[redPointAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andAlpha:0.0f]];
[pdfIconFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andFrame:self.redPoint.frame]];
[pdfIconFrameAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andFrame:self.pdfIcon.frame]];
[pdfIconAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(1) andAlpha:0.0f]];
[pdfIconAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc] initWithTime:timeForPage(2) andAlpha:1.0f]];

StyledPageControl

引导动画中常常会用到pageControl，但是如果采用官方的pageControl不免有些单调，这里推荐使用StyledPageControl，可以很简单地对pageControl进行设置。

这里要注意的是：需要将pageControl加载到self.view上，而不是self.scrollView

项目代码

示例代码是简聊2.0开发过程中制作的引导动画，完整代码请戳链接

RazzleDazzle

RazzleDazzle是JazzHands的swift版本，延续了JazzHands简单上手的优点。

接入RazzleDazzle仅需两步

1. 第一步让你的引导页ViewController继承AnimatedPagingScrollViewController
2. 告知viewcontroller需要显示的引导页页数

• override func numberOfPages() -> Int {
• return 4
• }

之后元素布置中,最重要的方法是keep(view: onPages: atTimes:),将各个元素在不同的时间放置在不同页面上的相应位置。

支持的动画类型包括：

• AlphaAnimation animates the alpha property (creates fade effects).
• BackgroundColorAnimation animates the backgroundColor property.
• RotationAnimation animates a rotation transform (for rotation effects).
• ScaleAnimation applies a scaling transform (to scale view sizes).
• TranslationAnimation applies a translation transform (to translate view position).
• CornerRadiusAnimation animates the layer.cornerRadius property.
• HideAnimation animates the hidden property (hides and shows views).
• LayerStrokeStartAnimation animates the strokeStart property of a CAShapeLayer (does not work with LayerStrokeEndAnimation).
• LayerStrokeEndAnimation animates the strokeEnd property of a CAShapeLayer (does not work with LayerStrokeStartAnimation).
• LayerFillColorAnimation animates the fillColor property of a CAShapeLayer.
• LayerStrokeColorAnimation animates the strokeColor property of a CAShapeLayer.
• PathPositionAnimation animates the layer.position property of a UIView along a path.
• LabelTextColorAnimation animates the textColor property of a UILabel.
• ConstraintConstantAnimation animates an AutoLayout constraint constant.
• ConstraintMultiplierAnimation animates an AutoLayout constraint constant as a multiple of an attribute of another view (to offset or resize views based on another view’s size)
• ScrollViewPageConstraintAnimation animates an AutoLayout constraint constant to place a view on a scroll view page (to position views on a scrollView using AutoLayout). This is the animation doing the heavy lifting for AnimatedPagingScrollViewController’s keepView(view: onPage:) function.

此外，RazzleDazzle支持自定义动画类型，可以实现各式各样的需求。

项目代码

示例代码是Teambition5.0开发过程中制作的引导动画，完整代码地址

无论是工程师，还是设计师，都可以自己动手来尝试一下这两个不错的画板工具。