欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS 动画设计(5)——用缓动函数实现物理动画效果

程序员文章站 2022-10-16 16:10:10
1. 缓动函数简介 (1) 缓动函数的动画效果是建立在 calayer 层级的关键帧动画基础之上的; (2) 缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值(即两点...

1. 缓动函数简介
(1) 缓动函数的动画效果是建立在 calayer 层级的关键帧动画基础之上的;
(2) 缓动函数是一系列模拟物理效果(如抛物线)方程式的统称,用以计算给定两点之间的插值(即两点间插入的关键帧);
(3) 两点之间插的值越多,效果越好,但是会耗费更多的性能;
(4) 了解了缓动函数的原理对设计出自己想要的动画效果有很大帮助。

常用的缓动函数种类如下图所示,可根据需求自行选择:
IOS 动画设计(5)——用缓动函数实现物理动画效果

关于 in、out、inout 的说明:

    ease ***in***:加速度缓动;
    ease ***out***:减速度缓动;
    ease ***inout***:先加速度至50%,再减速度完成动画。

方法介绍:

quad:二次方缓动
cubic:三次方缓动
quart:四次方缓动
quint:五次方缓动
sine:正弦曲线缓动
expo:指数曲线缓动
circ:圆形曲线的缓动
elastic:指数衰减的正弦曲线缓动
back:超过范围的三次方缓动
bounce:指数衰减的反弹缓动

2. 缓动函数与关键帧动画的联系
(1) 关键帧动画需要提供很多的帧来完善动画效果;
(2) 关键帧动画的帧可以通过一定的数学计算来提供需要的帧数;
(3) 关键帧动画只需要提供起始点,结束点,就可以通过缓动函数来计算中间“缺失”的帧;
(4) 缓动函数可以指定计算出多少帧;
(5) 帧数越多,动画越流畅,但同时耗费更多的gpu性能。

IOS 动画设计(5)——用缓动函数实现物理动画效果

3. 用缓动函数模拟物理动画

3.1 基本动画

基本动画部分比较简单, 但能实现的动画效果也很局限,使用方法大致为:
(1) 创建原始 ui 或者画面;
(2) 创建 cabasicanimation 实例, 并设置; keypart/duration/fromvalue/tovalue ;
(3) 设置动画最终停留的位置;
(4) 将配置好的动画添加到 layer 层中;

举个例子,实现一个圆形从上往下移动,实例代码如下:

     //设置原始画面
    uiview *showview               = [[uiview alloc] initwithframe:cgrectmake(0, 0, 100, 100)];
    showview.layer.maskstobounds   = yes;
    showview.layer.cornerradius    = 50.f;
    showview.layer.backgroundcolor = [uicolor redcolor].cgcolor;
    [self.view addsubview:showview];

    //创建基本动画
    cabasicanimation *basicanimation = [cabasicanimation animation];

    //设置属性
    basicanimation.keypath           = @"position";
    basicanimation.duration          = 4.0f;
    basicanimation.fromvalue         = [nsvalue valuewithcgpoint:showview.center];
    basicanimation.tovalue           = [nsvalue valuewithcgpoint:cgpointmake(50, 300)];

    //设置动画结束位置
    showview.center = cgpointmake(50, 300);

    //添加动画到layer层
    [showview.layer addanimation:basicanimation forkey:nil];

3.2 关键帧动画

其实跟基本动画差不多, 只是能设置多个动画路径 使用方法也类似, 大致为:

创建原始 ui 或者画面; 创建 cakeyframeanimation 实例, 并设置keypart/duration/values 相比基本动画只能设置开始和结束点, 关键帧动画能添加多个动画路径点; 设置动画最终停留的位置; 将配置好的动画添加到layer层中。

举个例子,实现一个红色圆球左右晃动往下坠落,实例代码如下:

     //设置原始画面
    uiview *showview               = [[uiview alloc] initwithframe:cgrectmake(0, 0, 100, 100)];
    showview.layer.maskstobounds   = yes;
    showview.layer.cornerradius    = 50.f;
    showview.layer.backgroundcolor = [uicolor redcolor].cgcolor;

    [self.view addsubview:showview];

    //创建关键帧动画
    cakeyframeanimation *keyframeanimation = [cakeyframeanimation animation];

    //设置动画属性
    keyframeanimation.keypath              = @"position";
    keyframeanimation.duration             = 4.0f;

    keyframeanimation.values = @[[nsvalue valuewithcgpoint:showview.center],
                                 [nsvalue valuewithcgpoint:cgpointmake(100, 100)],
                                 [nsvalue valuewithcgpoint:cgpointmake(50, 150)],
                                 [nsvalue valuewithcgpoint:cgpointmake(200, 200)]];

    //设置动画结束位置
    showview.center = cgpointmake(200, 200);

    //添加动画到layer层
    [showview.layer addanimation:keyframeanimation forkey:nil];

3.3 用缓动函数配合关键帧动画实现比较复杂的物理性动画

(1)实现弹簧效果(时钟秒针振动的弹簧效果)
IOS 动画设计(5)——用缓动函数实现物理动画效果
相应(包括缓动函数库)可在 摆动时钟源码下载 处下载。

(2)实现碰撞效果(指定图片往下的碰撞效果)
IOS 动画设计(5)——用缓动函数实现物理动画效果

(3)实现衰减效果(屏幕向左滑动的背景衰减效果)
IOS 动画设计(5)——用缓动函数实现物理动画效果