支持xcode6的缓动函数Easing以及使用示例
支持xcode6的缓动函数Easing以及使用示例
用xcode6新建工程后，直接导致不支持之前的Easing缓动函数的代码，经过修改后就可以正常使用了，虽然比不上POP高大上的动画，但用缓动函数的动画还是能够实现很复杂的效果的。
注：Easing缓动函数服务于关键帧动画，理解这一点很重要，需要你对CoreAnimation有着很深入的了解才能够用得得心应手
提供源码如下：
Easing.h 与 Easing.m
//
// Easing.h
// Easing
//
// Created by YouXianMing on 14-10-10.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #ifndef __Easing__Easing__
#define __Easing__Easing__ #include <stdio.h>
#include <math.h> #if defined(__LP64__) && !defined(AH_EASING_USE_DBL_PRECIS)
#define AH_EASING_USE_DBL_PRECIS
#endif #ifdef AH_EASING_USE_DBL_PRECIS
#define AHFloat double
#else
#define AHFloat float
#endif // 函数指针
typedef AHFloat (*AHEasingFunction)(AHFloat); // Linear interpolation (no easing)
AHFloat LinearInterpolation(AHFloat p); // Quadratic easing; p^2
AHFloat QuadraticEaseIn(AHFloat p);
AHFloat QuadraticEaseOut(AHFloat p);
AHFloat QuadraticEaseInOut(AHFloat p); // Cubic easing; p^3
AHFloat CubicEaseIn(AHFloat p);
AHFloat CubicEaseOut(AHFloat p);
AHFloat CubicEaseInOut(AHFloat p); // Quartic easing; p^4
AHFloat QuarticEaseIn(AHFloat p);
AHFloat QuarticEaseOut(AHFloat p);
AHFloat QuarticEaseInOut(AHFloat p); // Quintic easing; p^5
AHFloat QuinticEaseIn(AHFloat p);
AHFloat QuinticEaseOut(AHFloat p);
AHFloat QuinticEaseInOut(AHFloat p); // Sine wave easing; sin(p * PI/2)
AHFloat SineEaseIn(AHFloat p);
AHFloat SineEaseOut(AHFloat p);
AHFloat SineEaseInOut(AHFloat p); // Circular easing; sqrt(1 - p^2)
AHFloat CircularEaseIn(AHFloat p);
AHFloat CircularEaseOut(AHFloat p);
AHFloat CircularEaseInOut(AHFloat p); // Exponential easing, base 2
AHFloat ExponentialEaseIn(AHFloat p);
AHFloat ExponentialEaseOut(AHFloat p);
AHFloat ExponentialEaseInOut(AHFloat p); // Exponentially-damped sine wave easing
AHFloat ElasticEaseIn(AHFloat p);
AHFloat ElasticEaseOut(AHFloat p);
AHFloat ElasticEaseInOut(AHFloat p); // Overshooting cubic easing;
AHFloat BackEaseIn(AHFloat p);
AHFloat BackEaseOut(AHFloat p);
AHFloat BackEaseInOut(AHFloat p); // Exponentially-decaying bounce easing
AHFloat BounceEaseIn(AHFloat p);
AHFloat BounceEaseOut(AHFloat p);
AHFloat BounceEaseInOut(AHFloat p); #endif /* defined(__Easing__Easing__) */
//
// Easing.c
// Easing
//
// Created by YouXianMing on 14-10-10.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #include "Easing.h" // Modeled after the line y = x
AHFloat LinearInterpolation(AHFloat p)
{
return p;
} // Modeled after the parabola y = x^2
AHFloat QuadraticEaseIn(AHFloat p)
{
return p * p;
} // Modeled after the parabola y = -x^2 + 2x
AHFloat QuadraticEaseOut(AHFloat p)
{
return -(p * (p - ));
} // Modeled after the piecewise quadratic
// y = (1/2)((2x)^2) ; [0, 0.5)
// y = -(1/2)((2x-1)*(2x-3) - 1) ; [0.5, 1]
AHFloat QuadraticEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return * p * p;
}
else
{
return (- * p * p) + ( * p) - ;
}
} // Modeled after the cubic y = x^3
AHFloat CubicEaseIn(AHFloat p)
{
return p * p * p;
} // Modeled after the cubic y = (x - 1)^3 + 1
AHFloat CubicEaseOut(AHFloat p)
{
AHFloat f = (p - );
return f * f * f + ;
} // Modeled after the piecewise cubic
// y = (1/2)((2x)^3) ; [0, 0.5)
// y = (1/2)((2x-2)^3 + 2) ; [0.5, 1]
AHFloat CubicEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return * p * p * p;
}
else
{
AHFloat f = (( * p) - );
return 0.5 * f * f * f + ;
}
} // Modeled after the quartic x^4
AHFloat QuarticEaseIn(AHFloat p)
{
return p * p * p * p;
} // Modeled after the quartic y = 1 - (x - 1)^4
AHFloat QuarticEaseOut(AHFloat p)
{
AHFloat f = (p - );
return f * f * f * ( - p) + ;
} // Modeled after the piecewise quartic
// y = (1/2)((2x)^4) ; [0, 0.5)
// y = -(1/2)((2x-2)^4 - 2) ; [0.5, 1]
AHFloat QuarticEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return * p * p * p * p;
}
else
{
AHFloat f = (p - );
return - * f * f * f * f + ;
}
} // Modeled after the quintic y = x^5
AHFloat QuinticEaseIn(AHFloat p)
{
return p * p * p * p * p;
} // Modeled after the quintic y = (x - 1)^5 + 1
AHFloat QuinticEaseOut(AHFloat p)
{
AHFloat f = (p - );
return f * f * f * f * f + ;
} // Modeled after the piecewise quintic
// y = (1/2)((2x)^5) ; [0, 0.5)
// y = (1/2)((2x-2)^5 + 2) ; [0.5, 1]
AHFloat QuinticEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return * p * p * p * p * p;
}
else
{
AHFloat f = (( * p) - );
return 0.5 * f * f * f * f * f + ;
}
} // Modeled after quarter-cycle of sine wave
AHFloat SineEaseIn(AHFloat p)
{
return sin((p - ) * M_PI_2) + ;
} // Modeled after quarter-cycle of sine wave (different phase)
AHFloat SineEaseOut(AHFloat p)
{
return sin(p * M_PI_2);
} // Modeled after half sine wave
AHFloat SineEaseInOut(AHFloat p)
{
return 0.5 * ( - cos(p * M_PI));
} // Modeled after shifted quadrant IV of unit circle
AHFloat CircularEaseIn(AHFloat p)
{
return - sqrt( - (p * p));
} // Modeled after shifted quadrant II of unit circle
AHFloat CircularEaseOut(AHFloat p)
{
return sqrt(( - p) * p);
} // Modeled after the piecewise circular function
// y = (1/2)(1 - sqrt(1 - 4x^2)) ; [0, 0.5)
// y = (1/2)(sqrt(-(2x - 3)*(2x - 1)) + 1) ; [0.5, 1]
AHFloat CircularEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return 0.5 * ( - sqrt( - * (p * p)));
}
else
{
return 0.5 * (sqrt(-(( * p) - ) * (( * p) - )) + );
}
} // Modeled after the exponential function y = 2^(10(x - 1))
AHFloat ExponentialEaseIn(AHFloat p)
{
return (p == 0.0) ? p : pow(, * (p - ));
} // Modeled after the exponential function y = -2^(-10x) + 1
AHFloat ExponentialEaseOut(AHFloat p)
{
return (p == 1.0) ? p : - pow(, - * p);
} // Modeled after the piecewise exponential
// y = (1/2)2^(10(2x - 1)) ; [0,0.5)
// y = -(1/2)*2^(-10(2x - 1))) + 1 ; [0.5,1]
AHFloat ExponentialEaseInOut(AHFloat p)
{
if(p == 0.0 || p == 1.0) return p; if(p < 0.5)
{
return 0.5 * pow(, ( * p) - );
}
else
{
return -0.5 * pow(, (- * p) + ) + ;
}
} // Modeled after the damped sine wave y = sin(13pi/2*x)*pow(2, 10 * (x - 1))
AHFloat ElasticEaseIn(AHFloat p)
{
return sin( * M_PI_2 * p) * pow(, * (p - ));
} // Modeled after the damped sine wave y = sin(-13pi/2*(x + 1))*pow(2, -10x) + 1
AHFloat ElasticEaseOut(AHFloat p)
{
return sin(- * M_PI_2 * (p + )) * pow(, - * p) + ;
} // Modeled after the piecewise exponentially-damped sine wave:
// y = (1/2)*sin(13pi/2*(2*x))*pow(2, 10 * ((2*x) - 1)) ; [0,0.5)
// y = (1/2)*(sin(-13pi/2*((2x-1)+1))*pow(2,-10(2*x-1)) + 2) ; [0.5, 1]
AHFloat ElasticEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return 0.5 * sin( * M_PI_2 * ( * p)) * pow(, * (( * p) - ));
}
else
{
return 0.5 * (sin(- * M_PI_2 * (( * p - ) + )) * pow(, - * ( * p - )) + );
}
} // Modeled after the overshooting cubic y = x^3-x*sin(x*pi)
AHFloat BackEaseIn(AHFloat p)
{
return p * p * p - p * sin(p * M_PI);
} // Modeled after overshooting cubic y = 1-((1-x)^3-(1-x)*sin((1-x)*pi))
AHFloat BackEaseOut(AHFloat p)
{
AHFloat f = ( - p);
return - (f * f * f - f * sin(f * M_PI));
} // Modeled after the piecewise overshooting cubic function:
// y = (1/2)*((2x)^3-(2x)*sin(2*x*pi)) ; [0, 0.5)
// y = (1/2)*(1-((1-x)^3-(1-x)*sin((1-x)*pi))+1) ; [0.5, 1]
AHFloat BackEaseInOut(AHFloat p)
{
if(p < 0.5)
{
AHFloat f = * p;
return 0.5 * (f * f * f - f * sin(f * M_PI));
}
else
{
AHFloat f = ( - (*p - ));
return 0.5 * ( - (f * f * f - f * sin(f * M_PI))) + 0.5;
}
} AHFloat BounceEaseIn(AHFloat p)
{
return - BounceEaseOut( - p);
} AHFloat BounceEaseOut(AHFloat p)
{
if(p < /11.0)
{
return ( * p * p)/16.0;
}
else if(p < /11.0)
{
return (/40.0 * p * p) - (/10.0 * p) + /5.0;
}
else if(p < /10.0)
{
return (/361.0 * p * p) - (/1805.0 * p) + /1805.0;
}
else
{
return (/5.0 * p * p) - (/25.0 * p) + /25.0;
}
} AHFloat BounceEaseInOut(AHFloat p)
{
if(p < 0.5)
{
return 0.5 * BounceEaseIn(p*);
}
else
{
return 0.5 * BounceEaseOut(p * - ) + 0.5;
}
}
进一步封装的面向对象的使用代码
YXEasing.m 与 YXEasing.h
//
// YXEasing.h
// Prize
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "Easing.h" /*--------------------------------------------- -动画简单的解析- BackEase ：在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
BounceEase ：创建弹跳效果。
CircleEase ：创建使用循环函数加速和/或减速的动画。
CubicEase ：创建使用公式 f(t) = t^3 加速和/或减速的动画。
ElasticEase ：创建类似于弹簧在停止前来回振荡的动画。
ExponentialEase ：创建使用指数公式加速和/或减速的动画。
PowerEase ：创建使用公式 f(t) = t^p（其中，p 等于 Power 属性）加速和/或减速的动画。
QuadraticEase ：创建使用公式 f(t) = t^2 加速和/或减速的动画。
QuarticEase ：创建使用公式 f(t) = t^4 加速和/或减速的动画。
QuinticEase ：创建使用公式 f(t) = t^5 加速和/或减速的动画。
SineEase ：创建使用正弦公式加速和/或减速的动画。 LinearInterpolation QuadraticEaseIn
QuadraticEaseOut
QuadraticEaseInOut CubicEaseIn
CubicEaseOut
CubicEaseInOut QuarticEaseIn
QuarticEaseOut
QuarticEaseInOut QuinticEaseIn
QuinticEaseOut
QuinticEaseInOut SineEaseIn
SineEaseOut
SineEaseInOut CircularEaseIn
CircularEaseOut
CircularEaseInOut ExponentialEaseIn
ExponentialEaseOut
ExponentialEaseInOut ElasticEaseIn
ElasticEaseOut
ElasticEaseInOut BackEaseIn
BackEaseOut
BackEaseInOut BounceEaseIn
BounceEaseOut
BounceEaseInOut
---------------------------------------------*/ /*
// 计算好起始值,结束值
CGFloat oldValue = 0.f;
CGFloat newValue = 1.f; // 关键帧动画
CAKeyframeAnimation *animation = \
[CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; // 设置值
[animation setValues:[YXEasing calculateFrameFromValue:oldValue
toValue:newValue
func:ElasticEaseOut
frameCount:500]]; // 设置持续时间
animation.duration = 0.5f; // 每秒增加的角度(设定结果值,在提交动画之前执行)
layer.transform = \
CATransform3DMakeRotation(newValue, 0.0, 0.0, 1.0); // 提交动画
[layer addAnimation:animation forKey:nil]; */ @interface YXEasing : NSObject // 数组中存储的数据为 NSNumber float 型
+ (NSArray *)calculateFrameFromValue:(CGFloat)fromValue
toValue:(CGFloat)toValue
func:(AHEasingFunction)func
frameCount:(size_t)frameCount; // 数组中存储的数据为 NSValue CGPoint 型
+ (NSArray *)calculateFrameFromPoint:(CGPoint)fromPoint
toPoint:(CGPoint)toPoint
func:(AHEasingFunction)func
frameCount:(size_t)frameCount; // 数组中存储的数据为 NSValue CGSize 型
+ (NSArray *)calculateFrameFromSize:(CGSize)fromSize
toSize:(CGSize)toSize
func:(AHEasingFunction)func
frameCount:(size_t)frameCount; @end
//
// YXEasing.m
// Prize
//
// Copyright (c) 2014年 Y.X. All rights reserved.
// #import "YXEasing.h" @implementation YXEasing + (NSArray *)calculateFrameFromValue:(CGFloat)fromValue
toValue:(CGFloat)toValue
func:(AHEasingFunction)func
frameCount:(size_t)frameCount
{
// 设置帧数量
NSMutableArray *values = [NSMutableArray arrayWithCapacity:frameCount]; // 计算并存储
CGFloat t = 0.0;
CGFloat dt = 1.0 / (frameCount - );
for(size_t frame = ; frame < frameCount; ++frame, t += dt)
{
// 此处就会根据不同的函数计算出不同的值达到不同的效果
CGFloat value = fromValue + func(t) * (toValue - fromValue); // 将计算结果存储进数组中
[values addObject:[NSNumber numberWithFloat:(float)value]];
} // 数组中存储的数据为 NSNumber float 型
return values;
} + (NSArray *)calculateFrameFromPoint:(CGPoint)fromPoint
toPoint:(CGPoint)toPoint
func:(AHEasingFunction)func
frameCount:(size_t)frameCount
{
// 设置帧数量
NSMutableArray *values = [NSMutableArray arrayWithCapacity:frameCount]; // 计算并存储
CGFloat t = 0.0;
CGFloat dt = 1.0 / (frameCount - );
for(size_t frame = ; frame < frameCount; ++frame, t += dt)
{
// 此处就会根据不同的函数计算出不同的值达到不同的效果
CGFloat x = fromPoint.x + func(t) * (toPoint.x - fromPoint.x);
CGFloat y = fromPoint.y + func(t) * (toPoint.y - fromPoint.y); // 将计算结果存储进数组中
[values addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
} // 数组中存储的数据为 NSValue CGPoint 型
return values;
} + (NSArray *)calculateFrameFromSize:(CGSize)fromSize
toSize:(CGSize)toSize
func:(AHEasingFunction)func
frameCount:(size_t)frameCount
{
// 设置帧数量
NSMutableArray *values = [NSMutableArray arrayWithCapacity:frameCount]; // 计算并存储
CGFloat t = 0.0;
CGFloat dt = 1.0 / (frameCount - );
for(size_t frame = ; frame < frameCount; ++frame, t += dt)
{
// 此处就会根据不同的函数计算出不同的值达到不同的效果
CGFloat w = fromSize.width + func(t) * (toSize.width - fromSize.width);
CGFloat h = fromSize.height + func(t) * (toSize.height - fromSize.height); // 将计算结果存储进数组中
[values addObject:[NSValue valueWithCGSize:CGSizeMake(w, h)]];
} // 数组中存储的数据为 NSValue CGSize 型
return values;
} @end
使用示例：
//
// ViewController.m
// Easing
//
// Created by YouXianMing on 14-10-10.
// Copyright (c) 2014年 YouXianMing. All rights reserved.
// #import "ViewController.h"
#import "YXEasing.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
showView.backgroundColor = [UIColor redColor];
showView.center = self.view.center;
[self.view addSubview:showView]; // 计算好起始值,结束值
CGFloat oldValue = .f;
CGFloat newValue = .f; // 关键帧动画
CAKeyframeAnimation *animation = \
[CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; // 设置值
[animation setValues:[YXEasing calculateFrameFromValue:oldValue
toValue:newValue
func:ElasticEaseOut
frameCount:]]; // 设置持续时间
animation.duration = 1.5f; // 每秒增加的角度(设定结果值,在提交动画之前执行)
showView.layer.transform = \
CATransform3DMakeRotation(newValue, 0.0, 0.0, 1.0); // 提交动画
[showView.layer addAnimation:animation forKey:nil]; } @end
效果如下图：
支持xcode6的缓动函数Easing以及使用示例的更多相关文章
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- NGUI缓动函数
缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721
- iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果
先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...
- Silverlight动画学习笔记(三)：缓动函数
(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- EaseType 缓动函数
EaseType(动画曲线) EaseType 缓动函数或者我习惯叫它动画曲线,在很多的软件或动画中都有涉及到,下面是摘取的一些资料: 缓函数图例 Tween效果 每一幅图像当鼠标移上去,会有路径效果 ...
- WPF中的动画——（四）缓动函数
缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation = new D ...
- Tween + 缓动函数
Unity-Tween http://www.cnblogs.com/MrZivChu/p/UnityTween.html iTween: iTween大解构(一)之抛物线移动 http://blog ...
随机推荐
- 高性能队列Disruptor的使用
一.什么是 Disruptor 从功能上来看,Disruptor 是实现了"队列"的功能,而且是一个有界队列.那么它的应用场景自然就是"生产者-消费者"模型的应 ...
- 实现基于NTP协议的网络校时功能
无论PC端还是移动端系统都自带时间同步功能,基于的都是NTP协议,这里使用C#来实现基于NTP协议的网络校时功能(也就是实现时间同步). 1.NTP原理 NTP[Network Time Protoc ...
- 深入理解系列之 float
float的设计初衷: 仅仅是为了实现文字环绕效果 float的感性认知: 包裹性: 收缩:元素应用了float后,宽度收缩,紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小 坚挺:原来没有 ...
- vue引入bootstrap和fontawesome
npm install jquery npm install bootstrap npm install popper.js. import $ from 'jquery' import 'boots ...
- Struts2 数据驱动
在servlet中获取页面传递过来的数据的方式是:request.getParameter(“username”);这个代码可以获取到页面的username的数据.在action中可以通过属性驱动的方 ...
- MySQL Group Replication 介绍
2016-12-12,一个重要的日子,mysql5.7.17 GA版发布,正式推出Group Replication(组复制) 插件,通过这个插件增强了MySQL原有的高可用方案(原有的Replica ...
- linux安装QQ截图
本人(壮壮熊)现用系统是ubuntu 12.04 相信用过linux系统的朋友都知道,linux下的截图软件是在不咋的.虽然系统本身有带截图工具,但是却苦于没有办法在截下来的图片上作画圈.写文字说明等 ...
- FocusBI: SSIS 开发案例(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...
- 服务器php启动
php.ini放在--with-config-file-path设置路径下lib文件夹中才找的到!!!! fpm的配置文件需要放在这个位置/usr/local/etc/php-fpm.conf,暂时不 ...
- 基于RedHat6.5的Greenplum环境配置
安装Greenplum的时候遇到了很多坑,在此记录下 欢迎园友补充问题,共同研究解决! 安装说明 1.环境说明 操作系统:Red hat 6.5 64 位 2.配置规范 2.1基本说明 greenpl ...