从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开发过程中制作的引导动画,完整代码地址


无论是工程师,还是设计师,都可以自己动手来尝试一下这两个不错的画板工具。
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.