动画

DoTween

由 三世轮回 提交于 2020-02-22 19:08:48
DoTween DoTween效果速查 unity+tolua下用lua调用DG.Tweening.DOTween的示例 关于C#委托及Tolua下C#委托导出到lua DoTween效果速查 DoTween的缓动动画曲线与效果 DoTween缓动动画速查表 unity+tolua下用lua调用DG.Tweening.DOTween的示例 local sequence = DG . Tweening . DOTween . Sequence ( ) local tween = DG . Tweening . DOTween . To ( DG . Tweening . Core . DOSetter_float ( function ( value ) self : _onTweenScrollPos ( value ) end ) , pos . y , targetY , RandomPveEnterView . kScrollDuration ) sequence : Append ( tween ) sequence : AppendCallback ( DG . Tweening . TweenCallback ( function ( ) self : _onTweenEnd ( ) end ) ) sequence : SetEase ( DG . Tweening

uiimageView连续帧动画

由 梦想与她 提交于 2020-02-22 07:31:04
1 // 2 3 // MJViewController.m 4 5 // 05-汤姆猫 6 7 // 8 9 // Created by apple on 14-3-24. 10 11 // Copyright (c) 2014年 itcast. All rights reserved. 12 13 // 14 15 16 17 #import "MJViewController.h" 18 19 20 21 @interface MJViewController () 22 23 - (IBAction)drink; 24 25 - (IBAction)knock; 26 27 - (IBAction)rightFoot; 28 29 30 31 /** 这是一只显示图片的猫 */ 32 33 @property (weak, nonatomic) IBOutlet UIImageView *tom; 34 35 36 37 @end 38 39 40 41 @implementation MJViewController 42 43 /** 播放动画 */ 44 45 - (void)runAnimationWithCount:(int)count name:(NSString *)name 46 47 { 48 49 if (self.tom.isAnimating)

小月亮-动画

由 六眼飞鱼酱① 提交于 2020-02-20 22:02:30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小太阳案例</title> <style type="text/css"> /*小太阳*/ * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; overflow: hidden; } .sun { width: 100px; height: 100px; margin:100px; position: relative; } .sun::before,.sun::after { content: ""; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%,-50%); background-color: rgba(255,255,255,0.8); border-radius: 50%; animation: sun 2s infinite; } .sun::after { width: 80px; height: 80px; background: rgba(255,255,255,0.6); animation: sun

React-Native 动画优化

由 北城以北 提交于 2020-02-20 14:10:12
前言 动画对于客户端来说是非常重要的一部分，直接影响到应用的用户体验。前端对于动画优化通常使用CSS3样式来实现动画，以利用GPU加速特性。而React-Native由于渲染模式的不同，无法使用CSS样式的方式优化。 React-Native的实现 React-Native在动画方面有两个主要方式，一个是Animated，一个是LayoutAnimation。 Animated Animated 动画库的原理是由JavaScript来进行动画的计算，然后在每帧设置对应组件的style来实现动画过程（ requestAnimationFrame ）。 这个动画库的特点是非常灵活，因为所有的控制都是通过JavaScript实现的，动画补帧都是在JavaScript端完成，可以实现各种复杂动画效果，包括跟手动画等。 但是成也JavaScript败也JavaScript，JavaScript是单线程的，动画的特点是要保证流畅就要保证每秒60的帧率，也就是说如果在16ms内处理不完，势必要掉帧。而在实际业务中，播放动画的同时一般都会执行一些任务处理逻辑。比如数据拉取、数据计算，典型情况通常会伴有Loading动画，切换页面过场时伴随新页面数据加载等。在复杂场景下，由于业务逻辑的加入，动画处理的帧率就很难保证，用我们QA的话说就是卡的像个Web。。。 优点： 可实现复杂动画 非常灵活

Android的Activity屏幕切换滑动动画

由 空扰寡人 提交于 2020-02-19 07:33:26
Activity的切换效果使用的是Android的动画效果，Android的动画在官方有相关资料： http://developer.android.com/guide/topics/graphics/animation.html 和 http://developer.android.com/guide/topics/resources/animation-resource.html ，Activity的切换动画实际上是Android的View Animation(视图动画)中的Tween Animation效果，Tween Animation分为4种动画效果，分别是：alpha (透明变化) translate(位置移动) scale(缩放) rotate(旋转), 而左右滑动切换使用的是 translate(位置移动)的效果，在下一篇我们再讨论一下 alpha (透明变化) 、scale(缩放)、 rotate(旋转) 这三种效果，本篇只将 translate(位置移动)。 Translate动画是非常好理解，就是定义一个开始的位置和一个结束位置，定义移动时间，然后就能自动产生移动动画。Android的translate移动方向有 横向(X) 竖向(Y), 左右滑动使用了横向移动效果. 定义一个向上退出的动画和从下面进入的动画定义文件如下： out_to_up.xml

css3中的新特性经典应用

由 爷，独闯天下 提交于 2020-02-19 02:32:58
　　这篇文章主要分析css3新特性的典型应用，都是干活，没得水分。 　　　　1.动画属性：animation。 　　　　利用animation可以实现元素的动画效果，他是一个简写属性，用于设置6个动画属性：amination-name（名字)/duration（持续时间）/delay（延迟时间）/timing-function(速度曲线)/iteration-count（播放次数）/direction(是否轮流反向播放动画)。 animation: name duration timing-function delay iteration-count direction; animation-delay - 设置延时，也即从元素加载完成之后到动画序列开始执行的时间。 animation-direction - 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 允许值：normal(正常顺序), alternate, reverse（反向播放）, alternate-reverse 默认值：normal normal：动画循环播放时，从结束状态 跳回 到起始状态 浏览器对其他值的支持情况不佳，应该慎用。 animation-duration - 设置动画一个周期的时长。 animation-iteration-count - 设置动画重复次数（可以指定 infinite

【iOS系列】-UIImageView帧动画相关属性介绍

由 五迷三道 提交于 2020-02-18 19:22:52
UIImageView帧动画相关属性介绍 1:相关属性： //An array of UIImage objects to use for an animation.存放UIImage对象，会按顺序显示里面的图片 @property(nonatomic,copy) NSArray *animationImages; //帧动画的持续时间 @property(nonatomic) NSTimeInterval animationDuration; //帧动画的执行次数（默认是无限循环） @property(nonatomic) NSInteger animationRepeatCount; //开始执行帧动画 - (void)startAnimating; //停止执行帧动画 - (void)stopAnimating; //是否正在执行帧动画 - (BOOL)isAnimating; 2：关于缓存 由于UIImageview是一下子把全部图片全部加载，所以当对于缓存一定要进行管理否则，程序性能是个大问题 2.1：我们从UIImage入手，image加载有两种方式,api中相关介绍如下 //This method does not cache the image object. [UIImage imageWithContentsOfFile:name] //This method

vue2.0 之 过渡动画transtion

由 非 Y 不嫁゛ 提交于 2020-02-18 01:41:57
过渡的类名 ： 在进入/离开的过渡中，会有 6 个 class 切换 （ v 是前缀，name = v ） v-enter ：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-enter-active ：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 v-enter-to : 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。 v-leave : 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 v-leave-active ：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 v-leave-to : 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。 过渡动画流程： 机制原理： // 通过改变show的状态来切换动画 <div id="example-1">

jQuery easing动画效果扩展

由 淺唱寂寞╮ 提交于 2020-02-17 23:31:35
引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> 使用jQuery Easing $(element).slideUp({ 　　duration: 1000, 　　easing: method, 　　complete: callback }); 参数duration：定义动画速度，时间越短，运动速度越快。 参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic

2D和3D效果

由 只愿长相守 提交于 2020-02-17 19:59:16
一、2D效果 1.CSS3过渡 通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果 要实现这一点，必须规定两项内容： 规定希望把效果添加到哪个CSS属性上 规定效果时长 下面列出转换属性： 属性 描述 transition 简写属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的CSS属性名称 transition-duration 定义过渡效果花费的时间。默认是0 transition-timing-function 规定过渡效果的时间曲线。默认是ease transition-delay 规定过渡效果何时开始。默认是0 具体说明： 【语法】：transition-property：none|all|property； 【说明】：transition-property属性规定应用过渡效果的CSS属性名称。当指定的CSSshuxing 改变时，过渡效果将开始 none：没有属性会获得过渡效果 all：所有属性都将获得过渡效果 property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔 【语法】：transition-duration：time 【说明】：transition-duration属性规定完成过渡效果需要花费的时间以秒或毫秒计 time
订阅 动画