动画设计

动画的3个关键:过渡,重点,趣味性

过渡(Transition):要突出两个可视状态之间的平稳运动,使得用户可以成为适应新的屏幕,而不只是显示它。平稳过渡,简化了一个陌生的界面对用户的精神负担。

重点(Focus):将用户的注意力吸引到界面,很重要的或最近更新的,特别是需要马上吸引用户注意的

趣味性(Delight):通过使用奇思妙想或令人意外的运动,使一个原本平常的互动更具吸引力和趣味性。


动画属性

1. 位置Position: 项目在屏幕上精确的X和Y坐标

2. 不透明度Opacity: 项目的Alpha透明度,从0.0(不可见)到1.0。

3. 比例Scale: 相对于项目的初始尺寸大小。比例为1.0意味着设置高度和宽度为初始尺寸。比例为0.5意味着高度和宽度为初始尺寸的一半。比例为0.0表示该物体的宽度和高度为0,但仍处于存在在屏幕上。

当然动画也有其他的属性,这里有三个通常涉及更先进动画的属性
颜色Color:就像在CSS动画,你可以从一个颜色到另一个过渡色。这可能是一些文字,背景颜色的颜色,同时引入一个新的屏幕给用户。

旋转Rotation:可旋转的对象,通常以弧度(0 - 2π)。0°到360°旋转并回到0°。

3D:3D对象方法旋转量操纵它的第三个维度。这种旋转量也弧度表示,就像在2D平面旋转,3D动画关键在于透视。通过改变角度值,你如何描绘在视觉上描绘一个远离屏幕前方放置的元素。这将决定于3D转换时弧度如何展现

规划动画

你熟悉动画制作的工具,那就是具体的属性,你通常会操作创建一个动画的东西。但是,这还不是全部,你需要知道要开始思考如何设计运动

  1. 项目的初始属性:屏幕的底部?是完全透明的?
  2. 项目的最终性能:在屏幕的中间?用户完全可见?它已被旋转到特定的角度θ?现在有一个不同的背景颜色?
  3. 动画需要多长时间:知道动画的确切时间在这个早期阶段,多个物体同时动画效果,只有时间一个相同的交错量。
  4. 一旦该项目完成动画会发生什么:当您设置动画在屏幕它应该被删除?

就像在生活中,时间就是一切


喜欢的核心动画和CSS3提供的那种宽松的曲线数学上定义为贝塞尔曲线。

CSS动画中的贝塞尔

下面我要根据iOS下的Animatable UIView properties

frame:更改视图的大小和位置相对于它的父的坐标系。
bounds:更改视图的大小。
center:更改视图的位置。
transform:这个属性修改缩放,旋转或转换相对于二维空间的中心点视图。
alpha:更改视图的透明度。
backgroundColor:更改视图的背景颜色。
contentStretch:更改视图的内容被拉伸以填充可用空间的方式。

Animation block

swift动画Here’s a list of all four

本文只讲Animation block with spring physics

  1. duration(持续时间): 动画需要的秒数;
  2. delay(延迟):多长时间动画开始前等待的时间;
  3. dampingRatio:多少次振荡(0=无限 1=无);
  4. initialVelocity:如何快速地开始动画(1为“正常”);
  5. options(选项):不同的选项,我们可以用它来 ​​改变动画的行为;
  6. animations(动画): 在该块中输入的任何动画变化。
let duration = 1.0 
let delay = 0.0 
let options = UIViewAnimationOptions.CurveEaseInOut 
let damping = 0.5 // set damping ration
let velocity = 1.0 // set initial velocity 
UIView.animateWithDuration(duration, delay: delay, usingSpringWithDamping: damping, initialSpringVelocity: velocity, options: options, animations: {
    // 其中两个参数为usingspringwithdamping(阻尼), initalspringvelocity(初始速度)
    // any changes entered in this block will be animated       
}, completion: { finished in
    // any code entered here will be applied 
    // once the animation has completed              
})

这里我遇到一个问题给options同时写入两种选项时

let options = UIViewAnimationOptions.Autoreverse | UIViewAnimationOptions.Repeat

会报错:Binary operator '|' cannot be applied to two UIViewAutoresizing operands

应该写成:options: [.Repeat , .Autoreverse]

arc4random_uniform 函数返回一个零和所传递的数字之间的整数的函数。

我写的dome:doge分身术


弹性运动spring

标准的动画时序曲线很好用,但不会令你的用户有惊人的交互感受,因为仍然感到有些机械并没有完全流畅,用户喜欢自然的运动。如果我们希望我们的动画真正感到自然,我们需要关注的自然世界,我们可以模仿他们的动作:让你的物体运动符合物理定律,让你的界面元素觉得自己有分量和气势,因为它们可以流畅地在屏幕或用户的指尖下运动。

这些曲线代表连接到弹簧的物体的运动,以及如何各种性质(如张力,摩擦和质量)可能会影响其运动。表示已在欠阻尼的系统中,至稳定状态前来回振荡(反弹)。这动画感觉像上面的例子中弹簧末端有质量的运动时序曲线。这种欠阻尼弹簧的运动使动画有弹性。



红色圆圈移动,就好像它是连接到一个非常有弹性的弹簧。绿色圆圈会用更少的,更流畅的反弹移动。蓝色无反弹,逐渐指数衰减的动画,其中与最终位置的距离和减小的速度成正比。


弹性运动的主要属性:

  1. 质量(mass)是安装在弹簧的端部的物体的重量或分量。
  2. 伸展系数(stiffness)是弹性运动的困难度,这通常对应于它的厚度,以及如何紧密它盘绕。
  3. 阻尼(damping)是阻力或摩擦,当你在水中拖你的手,当你试图快速通过水动感受到力反作用力。

这里介绍JNWSpringanimation框架

  1. 导入框架下载JNWSpringAnimation框架github仓库地址

在swift导入该框架需要添加桥接头文件

#import "JNWSpringAnimation.h"

在NSValue+JNWAdditions.h文件中添加

#import <UIKit/UIKit.h>

  1. 创建小球弹性放大的比例动画
let redball = UIView(frame: CGRectMake(50, 50, 100, 100))
        redball.backgroundColor = UIColor.redColor()
        redball.layer.cornerRadius = 50
        self.view.addSubview(redball)
        let scale = JNWSpringAnimation(keyPath: "transform.scale")
        scale.damping = 6
        scale.stiffness = 100
        scale.mass = 2
        scale.fromValue = 1
        scale.toValue = 2
        redball.layer.addAnimation(scale, forKey: scale.keyPath)
        redball.transform = CGAffineTransformMakeScale(2, 2)

注意:

  1. 动画都是对layer层属性进行操作的
  2. JNWSpringAnimation默认会回到初始状态,所以要手动设置结束状态