`

Animation Timing

 
阅读更多

一:Animation Timing Curves

 

1:Linear Animation Timing

 

2:Ease-In Animation Timing

 

3:Ease-Out Animation Timing

 

4:Ease-In Ease-Out Animation Timing

5:Custom Animation Timing

 

 自定义动画执行曲线设置

We create a custom timing with the initWithControlPoints:::: method on CAMediaTimingFunction like this:

- (CAMediaTimingFunction *)getTimingFunction {
        CGFloat c1x = 0.5;
        CGFloat c1y = 1.0;
        CGFloat c2x = 0.5;
        CGFloat c2y = 0.0;
      return [[CAMediaTimingFunction alloc    initWithControlPoints:cx1 :cy1 :cx2 :cy2];
}

 

写道
Since the initial and final values are already known (recall that they are {0, 0} and {1, 1}, respectively), we have to specify only the control
points. In our example, we set the first control point to {0.5, 1.0} and the second control point to {0.5, 0.0}.

 

-(void)setupMover {
        NSRect bounds = self.bounds;
         NSRect moverFrame =NSInsetRect(bounds, NSWidth(bounds) / 4.0f,NSHeight(bounds) / 4.0f);
        moverFrame.origin.x = 0.0f;
mover = [[NSImageView alloc] initWithFrame:moverFrame];
[mover setImageScaling:NSScaleToFit];
[mover setImage:[NSImage imageNamed:@"photo.jpg" ]];
[self addSubview:mover];
}
- (id)initWithFrame:(NSRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupMover];
}
return self;
}

- (BOOL)acceptsFirstResponder {
return YES;
}
- (void)keyDown:(NSEvent *)event {
[self move];
}

- (CABasicAnimation *)moveAnimation {
if(nil == moveAnimation) {
moveAnimation = [CABasicAnimation animation];
moveAnimation.duration = 2.0f;
moveAnimation.timingFunction =
[[CAMediaTimingFunction alloc]
initWithControlPoints:0.5 :1.0 :0.5 :0.0];
}
return moveAnimation;
}
- (void)move {
NSDictionary *animations = [NSDictionary
dictionaryWithObject:[self moveAnimation]
forKey:@"frameOrigin" ];
[mover setAnimations:animations];
NSPoint origin = mover.frame.origin;
origin.x += NSWidth(mover.frame);
[mover.animator setFrameOrigin:origin];
}

 

分享到:
评论

相关推荐

    HTML5&CSS3网页制作:animationtimingfunction属性.pptx

    animation-timing-function属性;animation-timing-function属性;animation-timing-function属性;cubic-bezier(n,n,n,n)属性值可通过下图去理解:;animation-timing-function属性;animation-timing-function属性;总结...

    Animation and Control of Breaking Waves.pdf

    shape and the timing of the breaking. An additional advantage of the method is that it provides a significantly faster method for obtaining the full 3D breaking wave evolution compared to starting the...

    动画书籍][Animation.Books]Timing.for.Animation(动画时间的掌握).zip

    知识很全面的书籍,可以为专业动画制作打下坚实基础。

    基于CSS3 animation动画属性实现轮播图效果

    animation简介: CSS3的animation属性可以像Flash制作动画一样,通过控制...语法:animation: name duration timing-function delay iteration-count direction; animation设置的六个动画属性: animation-name:规定需

    css参考手册

    css参考手册W3School CSS 参考手册 来源: ...整理:飞龙 日期: 2014.10.26 CSS3 动画属性( Animation ...animation ... animation-play- ...animation-name ...animation-timing- function 规定动画的速度曲线。 3

    纯CSS3炫酷animation动画steps属性打造西洋镜动画特

    这是一款效果非常炫酷的纯CSS3西洋镜动画特效。该西洋镜动画使用CSS3的帧动画和3D transforms来制作,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画效果。

    css3中用animation的steps属性制作帧动画

    昨天火急火燎地接到一个任务... 于是我顺着他的思路,用上了animation在timing-function中的steps属性。  先来看看UI给的图吧,是这样的:(注:图片宽度1200px)    如果要播放这张图片的话,很明显是分为五个帧,

    CSS3中的Transition过度与Animation动画属性使用要点

    transition: property duration timing-function delay; /* property:执行过渡的属性 duration:执行过渡的持续时间 timing-function:执行过渡的速率模式 delay:延时多久执行 */ 

    lolcat-css-properties:Lolcat CSS属性

    Lolcat CSS属性 整体CSS属性翻译为Lolcat aka Lolspeak 如果您有任何建议,请随时提交请求请求 特性 'animation-delay': 'animashun-delay' 'animation-direction': 'animashun-direcshun' ... 'animation-timing

    CSS3实现西洋镜连续动画特效

    一款使用CSS3的帧动画和3D transforms来制作的,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画特效。

    基于 HTML+CSS+JS 的纸牌记忆游戏源码

    使用 JavaScript 构建纸牌记忆游戏源码。同时我们又学了一些知识,如:animation-duration 属性、`visibility` 属性和 `animation-timing-function` 属性等。

    Sassmixins集合Bourbon.zip

    @include animation-timing-function(ease); @include animation-iteration-count(infinite); // Animation shorthand works the same as the CSS3 animation shorthand @include animation(scale 1.0s ease-in...

    转盘抽奖源码

    .dot1, .dot3, .dot5, .dot7, .dot9, .dot11 { -webkit-animation-name: lighting; -webkit-animation-... -webkit-animation-timing-function: steps(2); -webkit-animation-iteration-count: infinite; }

    纯CSS3实现西洋镜动画特效.zip

    纯CSS3实现西洋镜动画特效是一款使用CSS3的帧动画和3D transforms来制作的,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画效果。

    Marquee-React-Dwyer:用于React的全球设计的字幕组件

    animation-timing-function: ease-in ; } 100% { transform: translate(-100%, 0) ; animation-timing-function: ease-out ; }} 实时示例: : 入门通过npm安装: npm i marquee-react-dwyer例子import React, { ...

    LESSPrefixer.zip

    .animation-timing-function(@function) .background-size(@args) .border-radius(@args) .box-shadow(@args) .inner-shadow(@args) * .box-sizing(@args) .border-box() * .content-box() *...

    微信小程序实现登录页云层漂浮的动画效果

    前言 2017年前端火了,微信小程序、weex、reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波。 上效果图(GIF动态图) 当我看到这张背景图的...animation-timing-function 规

    css transition animation的使用(内含贝赛尔曲线详解)

    animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简单的过渡动画也可以实现),常用于自动触发的效果。例如加载中的持续动画效果等等。 在学习这两种动画之前要最好是先了解一下 transition-...

    react-apple-easing:苹果为React提供的默认Core Animation缓动功能

    AppleEasing导出配置为与Core Animation的计时功能匹配的缓动功能。 它们通常很有品味,并且可能在iOS和Android上使用都有意义。 当前仅在React Native上支持该库。 安装 npm install react-apple-easing 用法 缓...

Global site tag (gtag.js) - Google Analytics