动画

过渡和动画 　　使用<transition> 组件包裹 　　例：　　<transition name="fade"> 　　　　　　　　<div v-if="true">过渡动画</div> 　　　　　　</transition> 　　style：.fade-enter-active, .fade-leave-active {transition: opactiy .5s} 　　　　　.fade-enter, .fade-leave-to{opacity:0;} 　　以上切换v-if的状态能够让div元素渐显渐隐，而不是直接添加删除 　　原理是VUE通过tansition组件的name属性值，然后使用它在过渡的各个节点为包含的元素添加类名。当元素被添加到文档或者从文档中移除时，会分别应用enter和leave两类过渡。以下是会添加的类名： 　　　　{name}-enter（常用）:这个类名会在元素被插入DOM时加入，然后在下一帧立刻移除。可以使用它来设置那些需要在元素开始进入过渡时移除的CSS属性。 　　　　{name}-enter-active（常用）: 在元素整个动画阶段应用。和-enter 同时被添加，然后在动画完成时被移除。适用于设置css过渡时间长度，过渡的属性和使用的曲线函数。 　　　　{name}-enter-to: 这个类名会在

jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 $( selector ).animate({ params } ,speed,callback ); 必需的 params 参数定义形成动画的 CSS 属性。 实例： $ ( " button " ) . click ( function ( ) { 　　$ ( " div " ) . animate ( { left : ' 250px ' } ) ; } ) ; 注：点击按钮，div元素向右移动250px 使用相对值 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： $ ( " button " ) . click ( function ( ) { 　　$ ( " div " ) . animate ( { 　　　　 left : ' 250px ' , 　　　　 height : ' +=150px ' , 　　　　 width : ' +=150px ' 　　 } ) ; } ) ; 使用预定义的值 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： 注：这样设置的效果为元素上下滑动至隐藏或显示。 来源： https://www.cnblogs.com/1016391912pm/p/11923037

vue 是渐进式前端js框架 有以下的特点： 　　1.适合做前端分离的项目 　　2.Angular指令优势 　　3.react组件优势 vue语言特点： 　　1.简单-入门容易 　　2.中文文档齐全 　　3.生态发达（插件多） 文本渲染指令： 　　v-text 　　{{}} 　　可以解析html字符串 表单绑定指令：v-model 属性绑定 ： 　　v-bind ：属性名="属性值" 　　v-bind：title="msg" 　　:title="msg" 事件绑定： 　　v-on：事件名="时间处理函数" 　　v-on：click = "showMsg" 　　v-on:click="showMsg()" 事件处理函数：methods：{showMsg();} 如果响应函数带括号默认不带$event事件参数 如果响应函数不带括号默认不会带$event事件参数 如果带括号($event)手动指定事件参数 事件绑定的简写 @click="showMsg" 事件按键修饰符 .enter .esc 事件名： @keyup @click @dblclick双击 @blur空间失去焦点 条件渲染 v-if ="表达式" 当表达式为真的时候显示 　　　　为假的时候隐藏 　　　　v-else　　 　　　　v-show="表达式" v-show 通过css方式隐藏 　　　　v-if

在掘金上看到一个大神总结的animation相关东西，感觉很震撼，需要记录一下 主要也是借助chrome devtool来查看相关的属性，然后去调整 自己只知道有 animation-name animation-delay time-function 次数等，其实这些事w3c上写的，只写了6个，还差两个没写 animation-play-state animation-fill-mode 这两个在w3c里面其实也可以找的到，看了下，现在浏览器的支持度其实还是挺不错的了 如下表格算是比较全的了 然后每个属性后面又有不同的取值，比如animation-fill-mode这个取值就有normal |forwards|backwards|both 说说自己的理解，forwards是规定动画结束之后保持最后一帧，而backwards一般是搭配delay，是指还没开始是规定好初始时的位置，就是和第一帧一致 最后，强烈推荐大家看看老姚的文章，都写的非常不错 https://juejin.im/post/5cdd178ee51d456e811d279b 来源： https://www.cnblogs.com/ysla/p/11909217.html

我们现在有一个简单需求：我们的界面中有一个Button和一个ImageView ，我们点击ImageView产生点击事件，然后我们点击Button来移动这个ImageView，让这个ImageView沿着X轴移动500,并且在移动之后我们再次点击ImageView的点击事件让它响应我们的ImageView的点击事件！ 请记住我们的第一个需求！我们开始分析： Android起初有两种动画： Frame Animation （逐帧动画） Tween Animation （补间动画）,但是在用的时候发现这两种动画有时候并不能满足我们的一些需要，所以Google在Androi3.0的时候推出了（Property Animation）属性动画,至于为什么前边的两种动画不能满足我们的需要，请往下看： Frame Animation(逐帧动画) 逐帧动画就是UI设计多张图片组成一个动画，然后将它们组合链接起来进行动画播放。 该方式类似于早期电影的制作原理：具体实现方式就不多说了，你只需要让你们的UI出多张图片，然后你顺序的组合就可以（前提是UI给您做图） Tween Animation(补间动画) ‍ ‍ Tween Animation ：是对某个 View 进行一系列的动画的操作，包括淡入淡出（ Alpha ），缩放（ Scale ），平移（ Translate ），旋转（ Rotate

<div id="div1"> <span id="share">分享</span> </div> 1.速度动画 <style> #div1{ width:200px; height:200px; background-color:red; position: relative; left: -200px; top:0; } #share{ width:20px;; height:50px; background-color: blue; color: white; position: absolute; left: 200px; top:75px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-200); } }; var timer=null; function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById("div1"); timer=setInterval(function()

一、基本概念 1、核心动画概念 Core Animation(核⼼动画)是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍 使⽤它需要先添加QuartzCore.framework和引入对应的框架 <QuartzCore/QuartzCore.h> 2、创建动画的步骤 初始化⼀个动画对象(CAAnimation)并设置一些动画相关的属性 CALayer中有很多属性都可以通过CAAnimation实现动画效果,包括:opacity、position、transform、bounds、contents等 使用CALayer的addAnimation:forKey方法增加动画到层,当动画对象添加到层后会⾃动执⾏。 Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。 ###3、CAAnimation CAAimation是所有动画对象的基类,负责控制动画的持续时间和速度,是个抽象类,不能直接使用,应该使用它具体的子类 CAAnimation继承结构如下： 注意：图中的紫色虚线代表“继承”某个类，红色虚线代表“遵守”某个类 二、基本动画 CABasicAnimation是CAPropertyAnimation的子类 扩展示例代码-平移： CABasicAnimation *animation = [CABasicAnimation

核心动画CoreAnimation 基本动画：CABasicAnimation 帧动画：CAKeyframeAnimation 组动画：CAAnimationGroup CoreAnimation时直接作用在CALayer上的，并非UIView。 CABasicAnimation:平移，旋转，缩放 CAKeyframeAnimation:按路径移动 若想将关键帧动画中的路径绘制出来，创建一个继承自UIView的子类，与self.view关联，在子类UIView中的drawRect方法中绘制。 一、基本动画的创建步骤： 创建基本动画对象，设置动画的属性（value，duration），将动画添加到要作用layer。 动画完成后默认会回到初始位置，此时若想layer定在动画完成时的位置，需要设置动画完成后不删除且修改fillMode为kCAFillModeForwards。 注意： 如果fillMode=kCAFillModeForwards和removedOnCompletion=NO，那么在动画执行完毕后，图层会保持显示动画执行后的状态。但在实质上，图层的属性值还是动画执行前的初始值，并没有真正被改变。比如，CALayer的position初始值为(0,0)，CABasicAnimation的fromValue为(10,10)，toValue为(100,100)

// // ViewController.m // 花瓣飘落 // #import "ViewController.h" @interface ViewController () { CALayer *_layer; // 创建一个图层 } @end @implementation ViewController - ( void )viewDidLoad { [ super viewDidLoad ]; // 设置背景 UIImage *backgroundImage = [ UIImage imageNamed : @"background" ]; self . view . backgroundColor = [ UIColor colorWithPatternImage :backgroundImage]; // 自定义一个图层（花瓣） _layer = [[ CALayer alloc ] init ]; _layer . bounds = CGRectMake ( 0 , 0 , 16 , 30 ); _layer . position = CGPointMake ( 50 , 200 ); _layer . contents = ( id )[ UIImage imageNamed : @"petal" ]. CGImage ; [ self . view .

###1、核心动画的基本概述 CoreAnimation的是 Objective - C 的框架,它通过简单的动画编程接口来提供一套高性能的动画引擎。 简单易用的高性能混合编程模型。 类似视图一样,你可以通过使用图层来创建复杂的接口。 轻量级的数据结构,它可以同时显示并让上百个图层产生动画效果。 一套简单的动画接口,可以让你的动画运行在独立的线程里面,并可以 独立于主线程之外 。 一旦动画配置完成并启动,核心动画完全控制并独立完成相应的动画帧 。 提高应用性能。应用程序只当发生改变的时候才重绘内容。再小的应用 程序也需要改变和提供布局服务层。核心动画还消除了在动画的帧速率 上运行的应用程序代码。 灵活的布局管理模型。包括允许图层相对同级图层的关系来设置相应属 性的位置和大小。 核心动画类(CAAnimation)包含CABasicAnimation(基本动画)、CATransition(转场动画)、CAKeyframeAnimation(关键帧动画)、CAAnimationGrup(动画组),动画的对象是图层(layer)。 CABasicAnimation :提供了在图层的属性值间简单的动画。 CAKeyframeAnimation : 提供支持关键帧动画。你指定动画的一个图层属性的关键路径,一个表示在动画的每个阶段的价值的数组,还有一个关键帧时间的数组和时间函数。