[翻译] RBBAnimation,让你使用关键帧动画更便利

简介:

RBBAnimation

RBBAnimation is a subclass of CAKeyframeAnimation that allows you to declare your animations using blocks instead of writing out all the individual key-frames.

This gives you greater flexibility when specifying your animations while keeping your code concise.

It comes out of the box with a replacement for CASpringAnimationsupport for custom easing functions such as bouncing as well as hooks to allow your writing your own animations fully from scratch.

RBBAnimation继承自CAKeyframeAnimation,允许你在block中设置你所需要的动画属性,而不是在外面单独的写键值对。当你既想着要实现动画效果,又想保持你的代码看起来清爽,毫无疑问RBBAnimation是你不二的选择。

Installation(安装

To install RBBAnimation, I recommend the excellent CocoaPods. Simply add this to your Podfile

pod 'RBBAnimation', '0.3.0'

and you are ready to go!

If you'd like to run the bundled test app, make sure to install its dependencies by running

pod install

after cloning the repo.

我建议你使用CocoaPods安装吧。

RBBCustomAnimation(自定义动画

Use RBBCustomAnimation to create arbitrary animations by passing in an RBBAnimationBlock:

使用RBBCustomAnimation来创建直观的自定义动画,在RBBAnimationBlock中设置即可。

RBBCustomAnimation *rainbow = [RBBCustomAnimation animationWithKeyPath:@"backgroundColor"];

rainbow.animationBlock = ^(CGFloat elapsed, CGFloat duration) {
    UIColor *color = [UIColor colorWithHue:elapsed / duration
                                saturation:1
                                brightness:1
                                     alpha:1];

    return (id)color.CGColor;
};

The arguments of the block are the current position of the animation as well as its total duration.

Most of the time, you will probably want to use the higher-level RBBTweenAnimation.

block中的参数就是你要设置动画的参数,以及需要你配置一个动画持续的时间。

大部分时间,你需要使用更高级别上的RBBTweenAnimation。

RBBSpringAnimation(精灵动画

RBBSpringAnimation is a handy replacement for the private CASpringAnimation. Specify your spring's mass, damping, stiffness as well as its initial velocity and watch it go:

RBBSpringAnimation是用来替换这个私有方法CASpringAnimation。指定你精灵对象的质量,阻尼,生硬程度以及他的速率,参考如下:

 

RBBSpringAnimation *spring = [RBBSpringAnimation animationWithKeyPath:@"position.y"];

spring.fromValue = @(-100.0f);
spring.toValue = @(100.0f);
spring.velocity = 0;
spring.mass = 1;
spring.damping = 10;
spring.stiffness = 100;

spring.additive = YES;
spring.duration = [spring durationForEpsilon:0.01];

RBBTweenAnimation(两点之间的动画

RBBTweenAnimation allows you to animate from one value to another, similar to CABasicAnimation but with a greater flexibility in how the values should be interpolated.

It supports the same cubic Bezier interpolation that you get from CAMediaTimingFunction using the RBBCubicBezier helper function:

RBBTweenAnimation允许你从一个值动态变化到另外一个值,就像CABasicAnimation一样,但是呢,对于如何设置参数更加便利。

它同样支持你篡改立方体贝塞尔曲线,你可以从CAMediaTimingFunction中使用RBBCubicBezier来获取一些帮助信息:

RBBTweenAnimation *easeInOutBack = [RBBTweenAnimation animationWithKeyPath:@"position.y"];

easeInOutBack.fromValue = @(-100.0f);
easeInOutBack.toValue = @(100.0f);
easeInOutBack.easing = RBBCubicBezier(0.68, -0.55, 0.265, 1.55);

easeInOutBack.additive = YES;
easeInOutBack.duration = 0.6;

However, RBBTweenAnimation also supports more complex easing functions such as RBBEasingFunctionEaseOutBounce:

当然,RBBTweenAnimation支持更复杂的easing方法,例如RBBEasingFunctionEaseOutBounce:

RBBTweenAnimation *bounce = [RBBTweenAnimation animationWithKeyPath:@"position.y"];
bounce.fromValue = @(-100);
bounce.toValue = @(100);
bounce.easing = RBBEasingFunctionEaseOutBounce;

bounce.additive = YES;
bounce.duration = 0.8;

You can also specify your own easing functions, from scratch:

你也可以使用你自己定制的easiing函数:

RBBTweenAnimation *sinus = [RBBTweenAnimation animationWithKeyPath:@"position.y"];
sinus.fromValue = @(0);
sinus.toValue = @(100);

sinus.easing = ^CGFloat (CGFloat fraction) {
    return sin((fraction) * 2 * M_PI);
};

sinus.additive = YES;
sinus.duration = 2;

目录
相关文章
|
6月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
67 1
|
4月前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
5月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
87 11
|
6月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
75 7
|
6月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
187 0
|
6月前
|
图形学 C# 开发者
Unity粒子系统全解析:从基础设置到高级编程技巧,教你轻松玩转绚丽多彩的视觉特效,打造震撼游戏画面的终极指南
【8月更文挑战第31天】粒子系统是Unity引擎的强大功能,可创建动态视觉效果,如火焰、爆炸等。本文介绍如何在Unity中使用粒子系统,并提供示例代码。首先创建粒子系统,然后调整Emission、Shape、Color over Lifetime等模块参数,实现所需效果。此外,还可通过C#脚本实现更复杂的粒子效果,增强游戏视觉冲击力和沉浸感。
406 0
|
6月前
|
前端开发
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
|
6月前
|
JavaScript 前端开发
动态背景,视觉盛宴:JavaScript动画让网页活起来!
动态背景,视觉盛宴:JavaScript动画让网页活起来!
|
7月前
|
自然语言处理 前端开发 JavaScript
【动画进阶】类 ChatGpt 多行文本打字效果
好了,本文到此结束,希望本文对你有所帮助 😃 想 Get 到最有意思的 CSS 资讯,千万不要错过我的公众号 -- iCSS前端趣闻 😄 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。 如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。 想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄 :
54 0
|
9月前
|
XML 前端开发 数据可视化
《CSS 简易速速上手小册》第4章:视觉美学(2024 最新版)
《CSS 简易速速上手小册》第4章:视觉美学(2024 最新版)
67 1

热门文章

最新文章