动画 | 易学教程

h5css样式

阅读更多关于 h5css样式

兼容性前缀：谷歌：webkit 火狐：moz ie：ms 欧鹏：o选择器：属性选择器： * = 包含 {href * = 'www'} ^ = 以什么开头 $ = 以什么结尾伪类选择器：第一个：first-of-type 最后一个：last-of-type 第几个：nth-of-type（）选中前n个：nth-of-type（-n）选中后5个：nth-of-type（n + 5）第4个到第8个：:nth-of-type（-n + 8）:nth-of-type（n + 4）奇数个：nth-of-type（2n + 1）odd 偶数：nth-of-type（2n）even子级： child:first-child :last-child :nth-child 空的元素：empty 除了：not() 可用的：:not(:disabled) / :enabled 禁用的：:disabled 获得焦点：:focus 当前激活元素：:target选项卡实例：<a href="#p1">123123</a><a href="#p2">123123</a><a href="#p3">123123</a><p id="p1">sadadsada23</p><p id="p2">3123123123</p><p id="p3">31asfegerg123</p> 同级后一个：+

动画函数

阅读更多关于动画函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover"> <title>动画函数</title> <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background: red; position: absolute; top: 60px; left: 0; } </style></head><body> <button id="btn1">滑动到400px</button> <button id="btn2">滑动到800px</button> <div id="box"></div> <script> var btn1 = document.querySelector('#btn1'); var btn2 = document.querySelector('#btn2'); var box =

周日的html学习

阅读更多关于周日的html学习

总结一下目前学习的CSS动画：过渡动画：可通过hover触发，格式如下 transition: property duration timing-function delay; property定义应用该特性的属性名，如宽度width duration定义动画时长，如.2s或2ms timing-function定义动画模式，linear ease ease-in-out常用，自定义可以用cubic-bezic(p1,p2,p3,p4)定义贝塞尔曲线 delay定义延迟一段时间播放动画：animation以及@keyframes @keyframes规定动画的关键帧，进度以%表示 @keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } animation类似transition animation: name duration timing

【30分钟学完】canvas动画|游戏基础(1)：理论先行

阅读更多关于【30分钟学完】canvas动画|游戏基础(1)：理论先行

前言本文虽说是基础教程，但这是相对动画/游戏领域来说，在前端领域算是中级教程了，不适合前端小白或萌新。阅读前请确保自己对前端三大件（JavaScript+CSS+HTML）的基础已经十分熟悉，而且有高中水平的数学和物理知识。demo采用ES6编写，遵循Airbnb规范，不依赖第三方框架或库，请在现代浏览器里运行。大部分例子来自《Foundation HTML5 Animation with JavaScript》，感谢这本书作者的辛劳和启发。本教程也可以算是该书的精(tian)简(you)优(jia)化(cu)版，既是我的个人读书笔记，也是经验总结，方便没空看书的忙人阅读。本人能力有限，欢迎牛人共同讨论，批评指正。何为动画/游戏【科普】动画是指由许多帧静止的画面，以一定的速度（如每秒16张）连续播放时，肉眼因视觉残象产生错觉，而误以为画面活动的作品。为了得到活动的画面，每个画面之间都会有细微的改变。而画面的制作方式，最常见的是手绘在纸张或赛璐珞片上，其它的方式还包含了运用黏土、模型、纸偶、沙画等。使用H5技术实现动画原理跟传统动画是一样的，都是利用“视觉暂留”现象，计算机通过一定的规则运算得到一个画面（像素数据），然后以一定速度连续播放就形成动画。但也有些许不同，传统动画的重点是绘画技法的表现，也就是每张图画得漂亮，而计算机动画更关心的是如何确立运算规则

vue动画实现方式

阅读更多关于 vue动画实现方式

vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="animate.css"> <style> * { margin: 0; padding: 0; } #app{ width: 600px; margin: 100px auto; } .box { width: 200px; height: 200px; background-color: pink; display: flex; justify-content: center; align-items: center; } button { width: 50px; height: 30px; } /* 第二步定义入场动画和出场动画 */ /* 格式：动画名-enter 入场动画*/ /* 格式：动画名-leave 出场动画*/ /* 进入过渡开始时的状态和离开过渡结束时的状态 */ .fade-enter,.fade-leave-to{ opacity: 0; transform:translate(500px, 0); } /* 进入过渡中的效果和离开过渡中的效果 */ .fade-enter-active,.fade-leave-active{

javaScript动画函数封装

阅读更多关于 javaScript动画函数封装

封装一个原生JavaScript动画函数　　函数说明　　　　- startAnimation() 函数的入口。接收三个参数：　　　　- obj:被操作的Dom对象　　　　- json:{"预处理的属性"：预处理属性值} 　　　　- fn:startAnimation函数的回调，动画是否为联动/同步等形式。　　使用场景：　　　　- 缓动场景，透明度动画，多物体运动，多值运动，自动轮播图...。　　代码 var speed = 0; //起始定义一个运动速度变量。 function startAnimation(obj, json, fn) { clearInterval(obj.timer); //在动画开始之前，先进行动画定时器的清理工作。 obj.timer = setInterval(function () { var cur = 0; //定义一个初始值为零的变量，用来接收操作对象的属性 var flag = true; //如果所有的属性值都到达终点值，则为true //透明度处理 for (var attr in json) { switch(attr){ case 'opacity': cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); break; case 'scrollTop': cur

简单说说《神薙》--杂谈

阅读更多关于简单说说《神薙》--杂谈

据说这本是山本宽可能翻身的作品来着，可惜原作者非要打破死宅的代入感，突然在漫画里整了一个人物让女主薙“不纯”，（我也不喜欢这样的发展）。搞得漫画停刊，动画腰斩，所以你现在看完这部动画，不知道讲了个啥就完结了，很可惜。有人说是因为玻璃心的死宅要闹，其实在我看来，与其看到这种合理，但是胃疼还没有解药的剧情，还不如不看。惋惜吧。我是两天看完的，只有14集，作画和分镜真的没得说，2008年的动画依旧可以吊打今天的一些垃圾动画（业界要完？），现在的动画太浮躁了，只是因为掌握了一点能把动画人物画的鲜艳一点的技巧，就整天执着这这些光污染，忽视了流畅的动作和痛快的镜头，我觉得真的没什么意义。（挣钱快？比如某刀剑？）啊宽这个人吧，我对他了解也不多，只知道他是京都动画出来的，因为“叛逆”等一些原因似乎。最出名的还是他对二战的发言，这里不多说，大家可以去搜。原作的一些原因导致这部作品剧情的不完整，但我从这部动画看到了一些希望，他的制作简直没话说，和新海城一样，都深深的打动了我。来源： https://www.cnblogs.com/lesning/p/11962876.html

ViewPager设置切换动画

阅读更多关于 ViewPager设置切换动画

在原生的ViewPager切换时会显的很突然很生硬，百度了许多前辈的案例，思路都差不多，那就是先写一个继承Scroller的类SpeedScroller package com.youhe.yoyo.addforlu; import android.content.Context; import android.view.animation.Interpolator; import android.widget.Scroller; /** * Created by abc on 2016/12/1. */ public class SpeedScroller extends Scroller { private int mDuration = 1000; public SpeedScroller(Context context) { super(context); } public SpeedScroller(Context context, Interpolator interpolator) { super(context, interpolator); } @Override public void startScroll(int startX, int startY, int dx, int dy, int duration) { // Ignore received

zrender-粒子动画

阅读更多关于 zrender-粒子动画

效果： let x = shuN.style.x + rectValue/4,//粒子开始的地方 y = zuY+140 + 5, h = 14*0.8, w = rectValue/2; this.drawParticles(x, y , w, h, 20, 0, i); //画牵引粒子 drawParticles(x, y, w, h, num, seriesId, dataId) {//x, y , w, h, 20, 0, i let partclesGroup = this.getSave('partclesGroup', seriesId, dataId); if(!partclesGroup) { partclesGroup = new zrender.Group(); this.zr.add(partclesGroup); this.setSave(partclesGroup, seriesId, dataId, 'partclesGroup') } else { return; partclesGroup.removeAll(); } for(let i = 0; i < num; i++) { let targetH = Math.random() * w/ 6;//随机 let p = new zrender.Rect({ shape: { // x: x +

css animation 制作打开动画效果

阅读更多关于 css animation 制作打开动画效果

思路如下： aimation 设置执行动画和时间以及是否循环 @keyframes 定义动画接着默认动画的div隐藏点击执行事件 display block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js" ></script> <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript"></script> </head> <body> <style type="text/css"> .layui-container{width: 40%;height: 400px;background-color: red;display: none;transform:translateY(100px); animation: luandong .5s; } @keyframes

订阅动画