在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作为主要依赖项。
MDMAnimationTraits *animationTraits =
[[MDMAnimationTraits alloc] initWithDuration:0.230
timingFunctionName:kCAMediaTimingFunctionEaseInEaseOut];
MDMMotionAnimator *animator = [[MDMMotionAnimator alloc] init];
[animator animateWithTraits:animationTraits animations:^{
view.alpha = 0;
}];
要了解更多信息,请访问MotionAnimator的GitHub页面
https://github.com/material-motion/motion-animator-objc
安装
使用 CocoaPods 安装
CocoaPods 是 Objective-C 和 Swift 库的依赖管理器。CocoaPods 自动化项目使用第三方库的过程。有关更多信息,请参阅入门指南。您可以使用以下命令安装它
gem install cocoapods
将 MotionInterchange
添加到您的 Podfile
pod 'MotionInterchange'
然后运行以下命令
pod install
用法
导入框架
@import MotionInterchange;
现在您将能够访问所有 API。
示例应用程序/单元测试
通过运行以下命令查看本地的 repo 复制以访问 Catalog 应用程序
git clone https://github.com/material-motion/motion-interchange-objc.git
cd motion-interchange-objc
pod install
open MotionInterchange.xcworkspace
指南
动画属性
您将主要使用的数据类型是 MDMAnimationTraits
。此类可以存储组成动画的所有必要属性,包括
- 延迟。
- 持续时间。
- 计时曲线。
- 重复。
在 Objective-C 中,您可以这样初始化一个简单的缓入/缓出贝塞尔实例
MDMAnimationTraits *traits = [[MDMAnimationTraits alloc] initWithDuration:0.5];
在 Swift 中的方式
let traits = MDMAnimationTraits(duration: 0.5)
还有许多初始化动画属性的方式。请阅读头文件文档以查看所有可用的初始化器。
时间曲线
时间曲线用来描述动画随时间进展的速度。Core Animation支持两种类型的时间曲线,因此MotionInterchange也支持。
- 三次贝塞尔曲线
- 弹性曲线
三次贝塞尔曲线用CAMediaTimingFunction对象表示。在Objective-C中,要定义具有三次贝塞尔曲线的动画属性
CAMediaTimingFunction *timingCurve =
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
MDMAnimationTraits *traits =
[[MDMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
在 Swift 中的方式
let timingCurve = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
let traits = MDMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
您还可以使用UIViewAnimationCurve类型在Objective-C中初始化时间曲线
MDMAnimationTraits *traits =
[[MDMAnimationTraits alloc] initWithDuration:0.5 animationCurve:UIViewAnimationCurveEaseIn];
在 Swift 中的方式
let traits = MDMAnimationTraits(duration: 0.5, animationCurve: .easeIn)
弹性曲线用自定义的MDMSpringTimingCurve
类型表示。在Objective-C中,要定义具有弹性曲线的动画属性
MDMSpringTimingCurve *timingCurve =
[[MDMSpringTimingCurve alloc] initWithMass:1 tension:100 friction:10];
MDMAnimationTraits *traits =
[[MDMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
在 Swift 中的方式
let timingCurve = MDMSpringTimingCurve(mass: 1, tension: 100, friction: 10)
let traits = MDMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
弹性曲线也可以使用UIKit的阻尼比概念进行初始化。当需要时,MDMSpringTimingCurveGenerator
类型会生成MDMSpringTimingCurve
实例。弹性时间曲线生成器可以存储为MDMAnimationTraits
实例的timingCurve
。
MDMSpringTimingCurveGenerator *timingCurve =
[[MDMSpringTimingCurveGenerator alloc] initWithDuration:<#(NSTimeInterval)#> dampingRatio:<#(CGFloat)#>];
MDMAnimationTraits *traits =
[[MDMAnimationTraits alloc] initWithDelay:0 duration:0.5 timingCurve:timingCurve];
在 Swift 中的方式
let timingCurve = MDMSpringTimingCurveGenerator(duration: 0.5, dampingRatio: 0.5)
let traits = MDMAnimationTraits(delay: 0, duration: 0.5, timingCurve: timingCurve)
贡献
我们欢迎贡献!
查看我们的即将到来的里程碑。
了解更多关于我们的团队、我们的社区和我们贡献者基础知识的信息。
许可
在Apache 2.0许可下发布。请参阅LICENSE了解详细信息。