1.3 Motion Design 效果标注文档规范

一、标注方案1 (贝塞尔-TimingFunction)

当使用AE进行动画设计时，开发者拿到AE视频后，可以对照标注文档，进行开发。

开发者需要以下参数：

1. 动画属性
2. 动画时间
3. 动画变化量
4. 动画曲线（贝塞尔插值）
5. 触发手势/触发条件(例如转场完成、进入 APP等)

一般来说，使用时间轴类原型工具，设计软件里通常如下：

转化为标注文档如下：

触发条件	对象	属性	0ms	175ms	175ms	245ms	245ms	350ms	350ms	420ms
点击元素E	元素A	缩放	100% －> 90% 曲线B		90% -> 100%,曲线B
		颜色			灰色->白色，曲线B
	元素B	颜色	白色->灰色，曲线B
	元素C	位移	左移500px，曲线C
		缩放	0% -> 103%,曲线B		103% -> 0%,曲线A
	元素D	位移	左移500px，曲线B
		缩放	0% -> 103%,曲线B				103% -> 0%,曲线A
	注：	曲线A：EaseInOut1 | 曲线B：EaseOut1 | 曲线C：EaseOut5(Back)

此文档为动画触发后的标注，有些情况下，由于动画比较复杂，需要配图说明

简单代码示例：

以元素C的位移为例,用带有 TimingFunction 的 CAAnimation 可以进行描述：

CABasicAnimation *animation = [CABasicAnimation animation];
//属性
animation.keyPath = @"position.x";
//变化量
animation.fromValue = @670;
animation.toValue = @170;
//时间
animation.duration = 0.42;
animation.fillMode = kCAFillModeForward;
animation.removedOnCompletion = NO;
//曲线C
animation.timingFunction =[CAMediaTimingFunction  functionWithControlPoints:0.78: 0.36: 0.14: 1.09];
[myView.layer addAnimation:animation forKey:@"myKey"];

在亚马逊的 Prime Music 的案例研究中也展示了这种标注方法

交互效果：

他们的标注方式(和上文异曲同工)

BBB612_POTATO的标注方式

二、标注方案2 (弹性 - POP)

当使用原型工具进行动画设计时，开发者拿到原型，进行测试操作，下面以 Origami 为例。

开发者需要的参数如下：

1. 动画属性
2. 动画变化量
3. 动画曲线(弹性参数)
4. 触发手势/触发条件(例如转场完成、进入 APP等)

使用 Origami 这类有原生代码依托的设计工具时，设计软件里通常如下

我们来看看这个交互效果，主要有点击手势和 Swipe 手势

标注文档如下：

触发条件	对象	属性	变化方式
点击 Info 按钮	Info 按钮	不透明度	空心Icon(progress,1,0),实心Icon(progress,0,1) | POP参数1
	描述文本	位置移动	(progress,0,上移54)
		不透明度	(progress,0,1)
	图片	位置移动	(progress,0,上移54)
	注：	POP参数1 - Bounciness:5 Speed:10

触发条件	对象	属性	变化方式
Swipe手势滑动图片	图片框 & 描述文本	X位移	左滑:图片1(progress,0,-400)，图片2(progress,400,0)，右滑反之 | POP参数2
	图片框内图像	X位移	左滑:图片1(progress,0,向右移动35)，图片2(progress,0,向右移动35)，右滑反之 | POP参数2
	Info 按钮 & Heart 按钮	不透明度	当前页Info(progress,1,0),下一页Info(progress,0,1) | POP参数2
	用户头像	不透明度	当前页头像(progress,1,0),下一页头像(progress,0,1) | POP参数2
		X位移	当前页头像(progress,0,向左移动35),下一页Info(progress,0,向左移动35) | POP参数2
	注：	POP参数2 - Bounciness:1 Speed:9

触发条件	对象	属性	变化方式
在图片区域TouchDown(Swipe手势开始)	用户头像	不透明度	当前页用户头像(progress,1,0) | POP参数3
	注：	POP参数3 - Bounciness:5,Speed:12

简单代码示例：

POP写动画的便利之处在于，只要拿到Progress，可以利用Progress快速做动画，而且可以响应手势，仅仅以第一个点击交互为例

//获取 POP 参数1 的 Progress
- (void)togglePopAnimation:(BOOL)on {
  POPSpringAnimation *animation = [self pop_animationForKey:@"popAnimation"];
  
  if (!animation) {
    animation = [POPSpringAnimation animation];
    animation.springBounciness = 5;
    animation.springSpeed = 10;
    animation.property = [POPAnimatableProperty propertyWithName:@"popAnimationProgress" initializer:^(POPMutableAnimatableProperty *prop) {
      prop.readBlock = ^(ViewController *obj, CGFloat values[]) {
        values[0] = obj.popAnimationProgress;
      };
      prop.writeBlock = ^(ViewController *obj, const CGFloat values[]) {
        obj.popAnimationProgress = values[0];
      };
      prop.threshold = 0.001;
    }];
    
    [self pop_addAnimation:animation forKey:@"popAnimation"];
  }
  
  animation.toValue = on ? @(1.0) : @(0.0);
}
//把POP参数给属性加上
- (void)setPopAnimationProgress:(CGFloat)progress {
	_popAnimationProgress = progress;

	//CGFloat yourvariable = POPTransition(progress, fromValue, toValue);

        CGFloat hollowinfoBtnOpacity = POPTransition(progress,1,0)
        CGFloat solidinfoBtnOpacity = POPTransition(progress,0,1)
 
        CGFloat descY = POPTransition(progress,550,604)
        CGFloat descOpacity = POPTransition(progress,0,1)

        CGFloat imageY = POPTransition(progress,200,254)
}

三、函数法

设计者使用一些函数式动画时，可以把JS函数或者AE表达式交给开发者，一起分析，达成效果。