GTMotionInterchange
一个用于表示Objective-C和Swift中动画特征的标准化格式。
“魔法数字”——那些无家可归的孤独值——通常是代码审查中首先被针对进行清理的东西。然而,与动画相关的数字可能被忽视并遗留在代码库中,基本没有得到组织上的谨慎。这些被遗忘的指标构成了移动交互的骨干,通常也是最需要关怀的——那么我们为什么愿意让它们在代码库中散乱呢?
// Let's play "find the magic number": how many magic numbers are hidden in this code?
[UIView animateWithDuration:0.230
delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
myButton.position = updatedPosition;
}
completion:nil];
// Hint: the answer is not "one, the number 0.230".
提取动画魔法数字的挑战在于,我们往往没有对动画由什么组成有一个明确的定义。动画不是仅仅由其持续时间决定的,正如颜色不是仅仅由红色的程度决定的。
动画的特征——就像颜色的红、绿、蓝成分一样——包括以下方面
- 延迟。
- 持续时间。
- 计时曲线。
- 重复。
在这个库中,您将找到用于存储和表示动画特征的简单数据类型,以便定义您动画的魔法数字能有个家。
欢迎回家,迷失的数字。
兄弟库:Motion Animator
尽管可以将Motion Interchange用作独立库,但Motion Animator是为了作为Motion Interchange数据类型的主要消费者而设计的。考虑将这两个库一起使用,以MotionAnimator为主要依赖项。
GTMAnimationTraits *animationTraits =
[[GTMAnimationTraits alloc] initWithDuration:0.230
timingFunctionName:kCAMediaTimingFunctionEaseInEaseOut];
GTMMotionAnimator *animator = [[GTMMotionAnimator alloc] init];
[animator animateWithTraits:animationTraits animations:^{
view.alpha = 0;
}];
想了解更多信息,请访问MotionAnimator的GitHub页面
https://github.com/liuxc123/GTMotionAnimator
安装
CocoaPods安装方式
CocoaPods是一个Objective-C和Swift库的依赖管理器。CocoaPods自动化了在项目中使用第三方库的过程。有关更多信息,请参阅入门指南。您可以使用以下命令安装它
gem install cocoapods
将GTMotionInterchange
添加到您的Podfile
pod 'GTMotionInterchange'
然后运行以下命令
pod install
用法
导入框架
@import MotionInterchange;
现在您可以访问所有的API。
示例应用程序/单元测试
运行以下命令以检查本地 репозитория и получить доступ к приложению Catalog
git clone https://github.com/material-motion/motion-interchange-objc.git
cd GTMotionInterchange
pod install
open GTMotionInterchange.xcworkspace
指南
动画属性
您将主要使用的数据类型是GTMAnimationTraits
。此类可以存储构成动画的所有必要属性,包括
- 延迟。
- 持续时间。
- 计时曲线。
- 重复。
在Objective-C中,您可以这样初始化一个简单的缓入缓出立方贝塞尔实例
GTMAnimationTraits *traits = [[GTMAnimationTraits alloc] initWithDuration:0.5];
并且在Swift中
let traits = GTMAnimationTraits(duration: 0.5)
还有许多其他初始化动画属性的方法。请阅读头文件文档以查看所有可用的初始化器。
时间曲线
时间曲线描述动画随时间进展的快慢。Core Animation 支持(因此也由 MotionInterchange 支持)两种类型的时间曲线。
- 三次贝塞尔
- 弹簧
三次贝塞尔曲线由 CAMediaTimingFunction 对象表示。在 Objective-C 中使用三次贝塞尔曲线定义动画特性
CAMediaTimingFunction *timingCurve =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
GTMAnimationTraits *traits =
[[GTMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
并且在Swift中
let timingCurve = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
let traits = GTMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
您还可以使用 UIViewAnimationCurve 类型在 Objective-C 中初始化时间曲线。
GTMAnimationTraits *traits =
[[GTMAnimationTraits alloc] initWithDuration:0.5 animationCurve:UIViewAnimationCurveEaseIn];
并且在Swift中
let traits = GTMAnimationTraits(duration: 0.5, animationCurve: .easeIn)
弹簧用自定义 GTMSpringTimingCurve
类型表示。在 Objective-C 中使用弹簧曲线定义动画特性
GTMSpringTimingCurve *timingCurve =
[[GTMSpringTimingCurve alloc] initWithMass:1 tension:100 friction:10];
GTMAnimationTraits *traits =
[[GTMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
并且在Swift中
let timingCurve = GTMSpringTimingCurve(mass: 1, tension: 100, friction: 10)
let traits = GTMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
弹簧还可以使用 UIKit 的阻尼比概念进行初始化。当需要时,GTMSpringTimingCurveGenerator
类型生成 GTMSpringTimingCurve
实例。弹簧时间曲线生成器可以存储为 GTMAnimationTraits
实例的 timingCurve
。
GTMSpringTimingCurveGenerator *timingCurve =
[[GTMSpringTimingCurveGenerator alloc] initWithDuration:<#(NSTimeInterval)#> dampingRatio:<#(CGFloat)#>];
GTMAnimationTraits *traits =
[[GTMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
并且在Swift中
let timingCurve = GTMSpringTimingCurveGenerator(duration: 0.5, dampingRatio: 0.5)
let traits = GTMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
作者
liuxc123, [email protected]
许可证
GTMotionInterchange 在 MIT 许可证下可用。有关更多信息,请参阅 LICENSE 文件。