随笔分类 - 动画
摘要：一、语法： window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自
阅读全文
摘要：一、正常动画实践 为了使用户达到更好的体验，做动画的时候都知道用requestAnimationFrame了，但是他也是有极限的，当绘制的东西足够多或者复杂的时候，频繁的删除与重绘降低了很多性能。 在canvas中粒子系统应该算是比较常见的一种了，现在创建一个canvas画布，并绘制100个粒子在整
阅读全文
摘要：我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度
阅读全文
摘要：Web动画形式 首先我们来了解一下Web有哪些动画形式 1. CSS3动画 Transform（变形） Transition（过渡） Animation（动画） 2. JS动画（操作DOM、修改CSS属性值） 3. Canvas动画 4. SVG动画 5. 以Three.js为首的3D动画 以上各种
阅读全文
摘要：canvas的图像变换api，可以帮助我们更加方便的绘画出一些酷炫的效果，也可以用来制作动画。接下来将总结一下canvas的变换方法，文末有一个例子来更加深刻的了解和利用这几个api。 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上（0，0）的位置。 首先
阅读全文
摘要：canvas可以绘制出很多奇妙的样式和美丽的效果，通过几个简单的api就可以在画布上呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布，而context相当于画笔。 1.绘制线条 moveTo(x0,y0)：把当前画笔（ictx）移动到（
阅读全文
摘要：一、requestAnimationFrame概念 与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAni
阅读全文
摘要：原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div
阅读全文
摘要：轮播在各个公司的官网上是非常常见的一种功能，能够有效的展示多个动态信息。之前一般实现轮播，是使用的js的动画。今天来介绍一种使用纯css实现的轮播图。 <div class="slide"> <ul class="slide-auto"> <li>one</li> <li>two</li> <li>
阅读全文
摘要：WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 <canvas>元素中使用。也就是说WebGL是在浏览
阅读全文
摘要：WebGL和OpenGL的区别为：性质不同、插件支持不同、用途不同。 WebGL WebGL的缩写为Web图形库。它主要用于渲染二维图形和交互式三维图形。它是可以与HTML5一起使用的Javascript API。它支持跨平台，并且仅以英语提供。WebGL程序由用JavaScript编写的控制代码组
阅读全文
