CocoaTweener 1.0.1

CocoaTweener 1.0.1

×

由 Alejandro Ramirez Varela 维护。

CocoaTweener 1.0.1

CocoaTweener

易于使用的 iOs 动画引擎，使应用程序更加强大和富有创意。

Logo

先决条件

  • 带有 IOs 8.0+ 的 Xcode

安装

使用 Cocoapods 安装

使用此 gem 安装 Cocoa Pods 以整合安装

$ gem install cocoapods

现在，将 CocoaTweener 添加到您的 Podfile 中

pod 'CocoaTweener', '~> 1.0.1'

要安装依赖，请运行以下命令

pod install

使用 Carthage 安装

使用 brew 安装 Carthage 以整合安装

$ brew update
$ brew install carthage

现在，将 CocoaTweener 添加到您的 Cartfile 中

github "alexrvarela/CocoaTweener" ~> 1.0.1

要安装依赖，请运行以下命令

$ carthage update

最后，将 CocoaTweener.framework 拖放到您的 Xcode 项目中

手动安装

下载、构建并将 CocoaTweener.framework 拷贝到您的 Xcode 项目中。

用法

将 CocoaTweener 引擎导入到您的项目中

#import <CocoaTweener/CocoaTweener.h>

动画任何这些类型的属性：int、float、double、CGFloat、CGPoint、CGRect、UIColor

首先设置初始状态

    myView.alpha = 0.25f;
    myView.frame = CGRectMake(20.0f, 20.0f, 100.0f, 100.0f);
    myView.backgroundColor = [UIColor redColor];

创建并添加简单的 Tween

Tween* myTween = [[Tween alloc] init:myView
    duration:1.0f
    ease:kEaseOutQuad
    keys:@{@"alpha" : @1.0f,
           @"frame" : [NSValue valueWithCGRect:CGRectMake(20.0f, 20.0f, 280.0f, 280.0f)],
           @"backgroundColor" : [UIColor blueColor]
         }
];

[CocoaTweener addTween:myTween];

Simple tween

使用 block 处理器与代码交互

myTween.onStartHandler = ^{
    myView.backgroundColor = UIColor.greenColor;
};

myTween.onUpdateHandler = ^{
    [self doAnything];
};

myTween.onCompleteHandler = ^{
    myView.backgroundColor = UIColor.redColor;
};

Handlers

您可以暂停、恢复和删除 Tween

对于所有现有的 Tween

[CocoaTweener pauseAllTweens];
[CocoaTweener resumeAllTweens];
[CocoaTweener removeAllTweens];

按目标

[CocoaTweener pauseTweens:myView];
[CocoaTweener resumeTweens:myView];
[CocoaTweener removeTweens:myView];

按目标的具体属性

[CocoaTweener pauseTweens:myView keyPaths:@["backgroundColor", "alpha"];
[CocoaTweener resumeTweens:myView keyPaths:@["backgroundColor", "alpha"];
[CocoaTweener removeTweens:myView keyPaths:@["backgroundColor", "alpha"];

发挥您的创造力！

Touch

Drag

Background animations

时间轴

添加 Tween 还是使用 Timeline 进行动画？

这取决于您的需求，Tween 只能将动画设置为“去”目标值，以属性当前值作为起点，这使您的应用更具动态性，每个 Tween 在动画完成后立即被销毁。

Timeline 存储每个 Tween 的“起始”和“结束”值，包含可重用的 Tween 集合，要创建 Timeline 和添加 Tween，请使用以下代码

Timeline* myTimeline = [[Timeline alloc] init];
[myTimeline addTween:myTween];
[myTimeline play];

您可以使用 Timeline 的播放模式交互，默认值是“单次播放”，完成后停止，要更改 Timeline 播放模式

循环，永远重复

myTimeline.playMode = kTimelinePlayModeLoop;

Loop

乒乓，前向和逆向

myTimeline.playMode = kTimelinePlayModePingPong;

Ping Pong

通过使用 UIScrollView 控制时间线执行视差滚动效果

Timeline scroll

时间轴检查器

您可以使用时间轴检查器调试和编辑 Tween

Visualize Tweens in real time!

Edit Tweens

Scale timeline editor

要创建时间轴检查器

TimelineInspector* myInspector = [[TimelineInspector alloc] init];
myInspector.timeline = myTimeline;
[self addSubview:myInspector];

PDFImageView

使用图像依赖项进行裁剪，并使用PDFImageView轻松导入您的矢量资产，无需将图像导出为SVG和其他格式，iOS提供了对PDF的原生支持，使用CoreGraphics，该类简单地将一个PDF渲染在UIImageView中。

从App包中加载名为"bee.pdf"的资产

PDFImageView* myAsset = [[PDFImageView alloc] init];
[myAsset loadFromBundle:@"bee"];
[myAsset addSubview:self.bee];

您可以使用简单的属性来增加或减少资产的大小

myAsset.scale = 1.5f;

目标

使用Aims创建更多复杂和令人印象深刻的动画

Aims

路径目标

使用路径控制运动

Path aim

myPathAim = [[PathAim alloc] init];
myPathAim.tweenPath.path = myPath;
myPathAim.tweenPath.target = self.bee;

要更改路径中的位置，请更改此属性值

myPathAim.interpolation = 0.5f;

并简单地进行路径插值动画

myPathAim.interpolation = 0.0;

Tween* myTween = [[Tween alloc] init:myPathAim
                                  duration:1.5f
                                      ease:kEaseNone
                                      keys:@{ @"interpolation" : @1.0f }
                        ];

[CocoaTweener addTween:myTween];

您可以使用此简单的脚本从Illustrator将路径导出到代码：[https://github.com/alexrvarela/generatePathCode](https://github.com/alexrvarela/generatePathCode)

旋转目标

动画任何视图的旋转

Rotation aim

RotationAim* myRotationAim = [[RotationAim alloc] init];
myRotationAim.tweenPath.target = myView;
myRotationAim.angle = 90.0f;

Tween* myTween = [[Tween alloc] init:myRotationAim
                                  duration:1.5f
                                      ease:kEaseInOutCubic
                                      keys:@{ @"angle" : @180.0f }
                        ];

[CocoaTweener addTween:myTween];

弧目标

创建弧动画

Arc aims

RotationAim* myArcAim = [[RotationAim alloc] init];
myArcAim.tweenPath.target = myView;
myArcAim.radius = 100.0f;
myArcAim.arcAngle = 0.0f;

Tween* myTween = [[Tween alloc] init:myArcAim
                                  duration:1.5f
                                      ease:kEaseInOutCubic
                                      keys:@{ @"arcAngle" : @360.0f }
                        ];

[CocoaTweener addTween:myTween];

字符串目标

动画文本过渡

String aims

StringAim* myStringAim = [[StringAim alloc] init];
myStringAim.from = @"hello";
myStringAim.to = @"hola";
myStringAim.target = myLabel;
myStringAim.interpolation = 0.0;

Tween* myTween = [[Tween alloc] init:myStringAim
                                  duration:1.5f
                                      ease:kEaseNone
                                      keys:@{ @"interpolation" : @1.0f }
                        ];

[CocoaTweener addTween:myTween];

玩转一切，组合不同的目标类型

Mix different aims

该库创建出来是为了给UI元素增加动态效果，如果您想要制作更复杂的动画，我建议使用Lottie实现。

贡献

本项目已迁移至Swift以支持未来的贡献，并将不再维护。

作者

  • 亚历杭德罗·拉米雷斯·瓦雷拉 - 初始工作 - alexrvarela

许可证

本项目遵守MIT许可证 - 详细内容请参阅LICENSE文件。

致谢