动画 | 易学教程

Debian更改开机动画

阅读更多关于 Debian更改开机动画

更改开机动画程序有以下几种 Plymouth：本次所使用的开机动画程序。 Bootsplash:第一款开机动画程序，目前已经被Splashy取代。 fbsplash:为了取代bootsplash，Gentoo开发的新开机动画程序。 Splashy:新的开机动画程序，以取代老化的bootsplash开机动画程序。 usplash:ubuntu之前早期使用的开机动画程序。 XSplash:Ubuntu9.10开始使用的开机动画程序。一、安装Plymouth sudo apt install plymouth plymouth-themes 二、更改/etc/default/grub 配置界面分辨率和启用开机动画，缩短grub选择启动界面 2.1运行以下命令得到屏幕分辨率 xdpyinfo | grep dimensions 2.2设置grub 添加以下命令行设置分辨率 GRUB_GFXMODE=1366x768 更改以下命令行更改前 GRUB_CMDLINE_LINUX_DEFAULT="quiet" 更改后 GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 2.3更新grub sudo update-grub2 给出grub详解 # 设定默认启动项，推荐使用数字 GRUB_DEFAULT=0 # 注释掉下面这行将会显示引导菜单 #GRUB

css动画及权重

阅读更多关于 css动画及权重

transition 动画效果属性 transition-xxx -duration ：过渡时间 -property ：过渡属性 width height backgroud-color none | all | property -timing-faction : 过渡方式 lnear 匀速默认 ease 缓冲运动 ease-in 加速 ease-out 减速 ease-in-out 快慢快 -delay 延时时间合并起来 transition ： property duration timing-function delay 属性过渡时间运动方式延时时间 transform 变换属性 translate（x ，y）位移多少像素 scale（x，y）缩放比例倍数 1 为不变 rotate（deg）设置盒子旋转参数为度数 45deg 45度 skew（x-ange，y-ange ）设置盒子倾斜单位为 deg 45deg ... rotateX rotateY rotateZ 设置三位旋转 perspective ：设置透视距离图片旋转的时候透视距离默认为none 没有透视语法 transform ： perspective（200px） rotateY（旋转角度）做变形动画的时候需要设置初始值不设置容易出现跳边的bug transform

vue动画

阅读更多关于 vue动画

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。上面是官方的原话但是怎么用下面是列子 <transition name="fold"> <div v-show="show" class="example"></div> </transition> css: .example { width: 100px; height: 100px; transform: translate3d(0, -100px, 0); } .fold-enter-active, .fold-leave-active { transition: all .5s; } .fold-enter, .fold-leave-active { transform: translate3d(0, 0, 0); } 当show = true时: 这里的fold-enter，是在元素显示的一瞬间被加入，然后瞬间被移除，在上面的例子中

【JS教程20】jquery动画

阅读更多关于【JS教程20】jquery动画

jquery动画通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。 /* animate参数：参数一：要改变的样式属性值，写成字典的形式参数二：动画持续的时间，单位为毫秒，一般不写单位参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动参数四：动画回调函数，动画完成后执行的匿名函数 */ $('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); }); 来源： https://www.cnblogs.com/zeug/p/11388404.html

利用canvas绘制序列帧动画

阅读更多关于利用canvas绘制序列帧动画

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="container"> 9 <canvas id="cavsElem"> 10 你的浏览器不支持canvas，请升级浏览器 11 </canvas> 12 <button id="btn-dir-left">向左</button> 13 <button id="btn-dir-right">向右</button> 14 <button id="btn-dir-up">向后</button> 15 <button id="btn-dir-down">向前</button> 16 </div> 17 <script> 18 (function(){ 19 var canvas = document.querySelector( '#cavsElem' ); 20 var ctx = canvas.getContext( '2d' ); 21 canvas.width = 200; 22 canvas.height = 200; 23 canvas.style.border = "1px solid #000"; 24 var

canvas绘制简易动画

阅读更多关于 canvas绘制简易动画

在canvas画布中制作动画相对来说很简单，实际上就是不断变化的坐标、擦除、重绘的过程 1、使用setInterval方法设置动画的间隔时间。 setInterval(code,millisec) setInterval方法html中固有方法，这个方法接受两个参数，第一个函数表示执行动画的函数，第二个参数为间隔时间，单位是（毫秒）。 2、用来绘图的函数 1）通过不断变换X和Y的坐标实现动画的效果。 2）在该函数中先用clearRect方法将画布整体或者局部擦除。擦除图像clearRect方法： context.clearRect(x,y,width,height); x是指我们起点的横坐标，y是指我们起点的纵坐标，width是指擦子的长度，height是指擦子的高度。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas绘制动画</title> <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="200" height="200"></canvas> </body> <

canvas小球动画原理

阅读更多关于 canvas小球动画原理

随着html5发展，canvas标签作为h5革命性的发展标志也越来越流行。canvas标签的强大之处，不仅在于它可以作为一个独立的画布，也可以利用canvas做一些动画而不用导入flash文件。同时，canvas还可以一些游戏、商城商品图片放大器功能等等。这篇博客先写一些简单动画，同时描述一下原理。首先，canvas标签不是一个独立的部分，它是要以js代码辅助而成的一个模块，所以js代码对其尤为重要。 body中写入canvas标签： <canvas id="canvas" width="750" height="500"></canvas><input type="button" id="animatebutton" value="animate" /> //控制小球的运动与暂停　　直接上js代码： canvas的js开头都是固定的： var canvas = document.getElementById('canvas'), cx= canvas.getContext('2d'),paused = true ,//设置小球加载完成是否暂停，现在加载完成小球不动。加载三个小球的数据： discs = [ { x:150, y:250, velocityx:-3.2, //小球横向运动速度 velocityy:3.5, //小球纵向运动速度 radius:25,　　　　

动画or漫画相关工具

阅读更多关于动画or漫画相关工具

用boujou做跟踪，maya做动画和模型，houdini做特效，arnold渲染 2.熟练使用CUDA； 3.熟练使用C/C++; 4.有Maya API插件开发经验； 5.对Maya节点运算原理有了解； 6.对绑定有了解; 来源： https://www.cnblogs.com/Bejadin/p/11384774.html

你未必知道的49个CSS知识点

阅读更多关于你未必知道的49个CSS知识点

作者：老姚，《JS正则迷你书》的作者 https://github .com/qdlaoyao/css-gif 本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。另外这里，老姚谢谢各位一如既往的支持。 01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似 02.【shape-outside】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的 03.【BFC应用】BFC应用之阻止外边距合并（margin collapsing） 04.【BFC应用】BFC应用之消除浮动的影响 05.【flex不为认知的特性之一】flex布局下margin:auto的神奇用法 06.【flex不为认知的特性之二】flex布局，当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部 07.【input的宽度】并不是给元素设置d isplay:block就会自动填充父元素宽度。input 就是个例外，其默认宽度取决于size特性的值 08.【定位特性】绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度 09.

h5-动画基本介绍

阅读更多关于 h5-动画基本介绍

1.介绍 1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 div{ 6 width: 200px; 7 height: 200px; 8 background-color: #5aff61; 9 10 /*添加动画效果*/ 11 /*1.animation-name: 指定动画名称;*/ 12 animation-name: moveTest; 13 /*2.设置动画的总耗时*/ 14 animation-duration: 2s; 15 /*3.设置动画的播放次数，默认1次，可以指定具体指，可以指定：infinite：无限次：*/ 16 /*animation-iteration-count: infinite;*/ 17 /*4.设置交替动画 alternate:来回交替*/ 18 /*animation-direction: alternate;*/ 19 /*5.设置动画延迟*/ 20 animation-delay: 2s; 21 /*6.设置动画结束时的状态：默认情况下，动画完毕之后回到原始状态 22 forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立即进行到动画的初识状态 23 backwards:不会保留动画结束时的装填，在添加了动画延迟的前提下，如果动画有初识状态，那么会立即进行到初识状态 24 both

订阅动画