动画 | 易学教程

vue动画

阅读更多关于 vue动画

vue动画的步骤 1.vue动画的制作，必须要使用transition元素，把需要被动画控制的元素包裹起来（transition元素是vue官方提供的） 2.要在style元素中自定义两组样式，来控制transition内部的元素实现动画 2.1 v-enter是进入之前，元素的起始状态，此时还没有进入 v-leave-to[]是动画离开之后，离开的终止状态，此时元素已经离开了 2.2 .v-enter-active,入场动画的时间段 .v-leave-active立场动画的时间段 *案例* <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> <style> .v-enter, .v-leave-to{ opacity: 0; transform: translateX(80px); } .v-enter-active, .v-leave

vue--组件动画效果--淡入淡出--位移

阅读更多关于 vue--组件动画效果--淡入淡出--位移

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script>  <style> /* v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入 */ /* v-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */ .v-enter, .v-leave-to { opacity: 0; transform: translateX(150px); } /* v-enter-active 【入场动画的时间段】 */ /* v-leave-active 【离场动画的时间段】 */ .v-enter-active, .v-leave-active{ transition: all 0.8s

试水之作：Choochoo · 2youyou2

阅读更多关于试水之作：Choochoo · 2youyou2

我的第一款游戏，使用 CocosCreator 制作。 Appstore : https://itunes.apple.com/app/id1189428283 简易教学关卡动效游戏关卡动效结束感谢关卡动效使用到的技术 TweenLite 在这个游戏中用到了比较多的动画，而这些动画都是由代码动态生成的，包括开场和结尾的文字特效。由程序控制的动画可以做出非常细腻的效果，并且可以根据环境动态调整。 cocos 本身的动画库就是 action 那一套，这套系统本身是从 cocos2d-x 里迁移过来的，并没有很好的利用 js 语法的优势。比如说想同时修改节点颜色和位置，得记住每一个属性对用的 action 的名字，还得用类似 cc.sequence 的 action 串联起来，实在是很累。在这里我选用的是 TweenLite 动画库，它可以很好地运行在 web 和 native 端上。使用方法很简单，只需要记住 TweenLite.to 这个方法就差不多了。例： 1 TweenLite.to(node, 2, {x:200, y:200}); TweenLite 是基础动画库，Greensock 还有加强版的动画库： TweenMax, TimelineLite, TimelineMax。更详细的相关介绍可以到 GASP 上看。关卡编辑为了更快捷的编辑关卡，特地在

ppt笔记整理

阅读更多关于 ppt笔记整理

PPT笔记 1、ppt：全称：MicrosoftPowerPoint 2010，是微软公司生产的办公软件之一，ppt是演示文稿【word：文本文档，excel：电子制表软件，工作簿】，可以用来做课件、工作总结等 2、打开ppt的方式：方式一：windows+R->powerpnt 方式二：开始->所有程序->MicrosoftOffice-> Microsoft PowerPoint 2010 3、扩展名 ppt 2007及以上版本：.pptx 2003版本：.ppt word 2007及以上版本：.docx 2003版本：.doc excel 2007及以上版本：.xlsx 2003版本：.xls 4、幻灯片：大纲窗格中一张一张的页面称作幻灯片，演示文稿由幻灯片组成 5、插入幻灯片的方式：方式一：在大纲窗格中，想要插入幻灯片的位置，打回车键即可方式二：在大纲窗格中，右击->新建幻灯片方式三：开始菜单->幻灯片组->新建幻灯片命令（选择任意一种版式） 6、删除幻灯片方式：方式一：选中幻灯片，按backspace或者delete键方式二：选中幻灯片，右击->删除幻灯片 7、复制幻灯片：选中幻灯片，右击->复制幻灯片 8、设置幻灯片背景方式一：选中幻灯片，右击->设置背景格式方式二：选中幻灯片，设计菜单->背景组->背景样式 9、幻灯片主题的设置：设计菜单->主题组

【动态壁纸】海贼王桌面宠物：路飞【升级3.1】

阅读更多关于【动态壁纸】海贼王桌面宠物：路飞【升级3.1】

自己制作应用一款很不错的android动态壁纸，是海贼王的，桌面宠物小路飞。挺好玩的，有许多设置功能和动画效果，还可以跟他互动一款有趣可爱的海贼王桌面宠物动态壁纸，海迷必备！首款可以自定义背景图片的动态壁纸，还可以设置不同数量、大小、类型的Q版路飞放置在桌面上；还有酷炫的设置界面。快来领养专属于你的小路飞吧！（注：适用于android2.1及以上系统，安装后在【MENU】->【壁纸】->【动态壁纸】中设置；请勿安装在SD卡中）版本升级：3.1 1、美化了设置界面 2、增加自定义背景图片功能，提高原有背景清晰度 3、增加动画报时功能，拖动动画显示时间及日期 --------------------------------------------------------------- 版本升级：2.0 1、增强用户体验，免去了必须使用积分墙才能开启功能使用，可试用后激活 2、修复了图片在各种不同分辨率屏幕上的显示问题 3、修改了设置为默认后重新启动时动画个数的错误显示下载地址: http://www.nduoa.com/apk/detail/138249 新预览图来源： CSDN 作者：阿凯链接： https://blog.csdn.net/You_and_Me12/article/details/7224408

CSS3 动画学习笔记

阅读更多关于 CSS3 动画学习笔记

CSS3综合部分 2D转换(transform) 转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放位移(改变元素位置) translate( x , y ) 定义 2D 转换，沿着 X 和 Y 轴移动元素。例如: .box { transform: translate(100px, 200px); } 使用方式介绍: 基本写法: transform: translate(length, length); 总结: 1. 最多能设置两个值, 一个值用来改变水平,另外一个一个值用来改变垂直方向 2. 如果设置两个值,第一个值代表水平,第二值代表垂直 3. 如果希望让元素逆方向移动,可以设置负数 4. 通过位移方式改变元素位置,设置的值就是相对元素本身宽度和高度(可以设置百分比) 5. 如果设置一个值,那么元素只能在水平方向移动 2D位移方式实现定位元素居中 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 旋转 rotate( angle ) 定义 2D 旋转，在参数中规定角度。基本使用: transform: rotate(angle) 总结: 1. 设置的值代表旋转的角度(单位deg) 2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转

动画多状态写法2

阅读更多关于动画多状态写法2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { animation: change 3s forwards; } /* 百分比是相对动画时长 */ @keyframes change { 0% { width: 100px; height: 100px; background-color: #ccc; } 20% { width: 200px; height: 300px; background-color: #aaa; } 50% { width: 200px; height: 400px; background-color: blue; } 80% { width: 600px; height: 500px; background-color: yellow; } 100% { width: 800px; height: 800px; background-color: red; } } </style> </head> <body> <div class="box"></div> </body> </html> 来源： https://www.cnblogs.com/divtab/p

动画多状态写法

阅读更多关于动画多状态写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: red; /* animation: change 1s 2s; */ /* forwards 在动画后后固定*/ animation: change1 1s linear forwards, change2 1s linear 1s forwards, change3 1s linear 2s forwards; } @keyframes change1 { /* 宽200 变成宽400*/ from { width: 200px; } to { width: 400px; } } @keyframes change2 { /*高200 变成高度400 */ from { width: 400px; height: 200px; } to { width: 400px; height: 400px; } } @keyframes change3 { /*背景色红色变成绿色*/ from { width: 400px; height: 400px;

iOS开发UI篇—核心动画(转场动画和组动画

阅读更多关于 iOS开发UI篇—核心动画(转场动画和组动画

iOS开发UI篇—核心动画(转场动画和组动画) 一、转场动画简单介绍 CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果属性解析: type：动画过渡类型 subtype：动画过渡方向 startProgress：动画起点(在整体动画的百分比) endProgress：动画终点(在整体动画的百分比) 二、转场动画代码示例 1.界面搭建 2.实现代码 1 // 2 // YYViewController.m 3 // 13-转场动画 4 // 5 // Created by apple on 14-6-21. 6 // Copyright (c) 2014年 itcase. All rights reserved. 7 // 8 9 #import " YYViewController.h " 10 11 @interface YYViewController () 12 @property(nonatomic,assign) int index; 13 @property (weak, nonatomic) IBOutlet UIImageView * iconView; 14 15

2019.9.22CSS3动画

阅读更多关于 2019.9.22CSS3动画

在HTML中，除了能在JS中制作动画外，还能在CSS中设置动画，需要用到CSS3的animation属性如何使用animation属性呢？首先，需要定义一个动画的样式 @keyframes 样式名{ } 里面可以写从0到100的百分数 0%{ 此时的样式： left：300； top：300； } 每一个百分数都对应一个时间点该元素的样式定义后，在需要加入动画的元素样式上加上 animation：动画名；例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关键帧动画</title> <style> div{ position: absolute; width: 100px; height: 100px; background-color: #0f0; /*一个元素上可以引用多个动画，且多个动画是同时进行的*/ /*animation: run 4s cubic-bezier(0.15, 0.91, 1, 1) , changeWidth 4s;*/ /* 动画名称动画时长动画运动曲线动画延迟时间动画的播放次数 infinite 无限循环 alternate钟摆效果*/ animation: run 4s cubic-bezier(.5, 1, 1, 1) 3s ; /

订阅动画