一: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];
}
分享到:
相关推荐
animation-timing-function属性;animation-timing-function属性;animation-timing-function属性;cubic-bezier(n,n,n,n)属性值可通过下图去理解:;animation-timing-function属性;animation-timing-function属性;总结...
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简介: CSS3的animation属性可以像Flash制作动画一样,通过控制...语法:animation: name duration timing-function delay iteration-count direction; animation设置的六个动画属性: animation-name:规定需
css参考手册W3School CSS 参考手册 来源: ...整理:飞龙 日期: 2014.10.26 CSS3 动画属性( Animation ...animation ... animation-play- ...animation-name ...animation-timing- function 规定动画的速度曲线。 3
这是一款效果非常炫酷的纯CSS3西洋镜动画特效。该西洋镜动画使用CSS3的帧动画和3D transforms来制作,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画效果。
昨天火急火燎地接到一个任务... 于是我顺着他的思路,用上了animation在timing-function中的steps属性。 先来看看UI给的图吧,是这样的:(注:图片宽度1200px) 如果要播放这张图片的话,很明显是分为五个帧,
transition: property duration timing-function delay; /* property:执行过渡的属性 duration:执行过渡的持续时间 timing-function:执行过渡的速率模式 delay:延时多久执行 */
Lolcat CSS属性 整体CSS属性翻译为Lolcat aka Lolspeak 如果您有任何建议,请随时提交请求请求 特性 'animation-delay': 'animashun-delay' 'animation-direction': 'animashun-direcshun' ... 'animation-timing
一款使用CSS3的帧动画和3D transforms来制作的,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画特效。
使用 JavaScript 构建纸牌记忆游戏源码。同时我们又学了一些知识,如:animation-duration 属性、`visibility` 属性和 `animation-timing-function` 属性等。
@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实现西洋镜动画特效是一款使用CSS3的帧动画和3D transforms来制作的,在animation动画的animation-timing-function参数使用steps来处理,制作出类似西洋镜的连续动画效果。
animation-timing-function: ease-in ; } 100% { transform: translate(-100%, 0) ; animation-timing-function: ease-out ; }} 实时示例: : 入门通过npm安装: npm i marquee-react-dwyer例子import React, { ...
.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 规
animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简单的过渡动画也可以实现),常用于自动触发的效果。例如加载中的持续动画效果等等。 在学习这两种动画之前要最好是先了解一下 transition-...
AppleEasing导出配置为与Core Animation的计时功能匹配的缓动功能。 它们通常很有品味,并且可能在iOS和Android上使用都有意义。 当前仅在React Native上支持该库。 安装 npm install react-apple-easing 用法 缓...