MotionInterchange 4.0.1

MotionInterchange 4.0.1

测试已测试
语言语言 Obj-CObjective C
许可证 Apache-2.0
发布最新发布2021年4月

由以下人员维护:Jeff VerkoeyenIan GordonAdrian Secord



  • Material Motion作者团队

Motion Interchange Banner

在Objective-C和Swift中表示动画特征的标准格式。

Build Status codecov CocoaPods Compatible Platform

“魔数”——那些孤独、无家可归的值——通常是代码审查中要清理的第一个目标。然而,与动画相关的数字可能会被忽视并被遗留下来,散布在整个代码库中,几乎没有组织上的谨慎。这些被遗忘的指标构成了移动交互的基础,并且经常是需要最多关注的对象——那么我们为什么可以让他们散布在代码库中呢?

// 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

指南

  1. 动画属性
  2. 时间曲线

动画属性

您将主要使用的数据类型是 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了解详细信息。