找回密码
当前位置：前端开发者 > 教程 > 正文

Web前端开发动画深入理解

2018-12-20 分类：教程 阅读(667) 评论(0)
微信登录功能开发是前端吗
微信小程序开发 前端后端
微信前端开发ide

现在实现web动画效果主流的都是CSS3了，而且一些主流的浏览器对它也有比较好的支持。但是CSS3动画的运动轨迹比较少，有很大的局限性。这时候我们一般会用js或者jquery
了。在这里我们着重讨论js的动画。
首先先讲一个简单的知识点。何为动画？动画就是一系列图片在一定速度下播放产生的运动视觉效果。
说到js动画大家都会想起setTimeout()和setInterval()这两个方法。但是这两种方法制作动画会发生【跳帧】问题。【跳帧】是指当【帧频】超过【60帧/S】的时候，会跳过某些图片不播放。而动画的【帧频】至少是60帧/S，这样我们才能看到流畅的动画效果。
在这里我们就需要引出js的另一个方法了requestAnimationFrame()。该方法的特点如下：
1.它有固定的帧频【60帧/S】（我目前没有找到能改变它【帧频】的方法，有知情者请告知。）
2.它会把每一帧中的所有DOM操作在一次重绘或回流中就完成，节省CPU的开销。
【附录：当DOM元素的规模尺寸，布局，隐藏等法神改变时而需要重新构建。这称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染DOM结构树中受到影响的部分失效，并重新构造这部分渲染DOM结构树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。注意：重绘不一定引起回流，回流一定会引起重绘】。
3.requestAnimationFrame()方法不会对隐藏的元素进行回流和重绘。
特别是安卓设备对它的支持简直就是渣渣，希望以后对它的支持能够满足我们吧。
好了废话少说，贴出代码看效果。
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>requestAnimationFrame动画效果</title>
        <script type=”text/javascript”>
            function animaFuns() {
                var requestAnimFrame = (function() {
                    return (
                        window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        setAnimationFuns
                    )
                })()
                console.log(requestAnimFrame)
                //备胎函数，主要用于不兼容requestAnimationFrame方法的函数
                function setAnimationFuns(callback) {
                    window.setTimeout(callback, 5)
                }
                //定义变量canvas，context;
                var canvas = null,
                    context = null,
                    i = 0,
                    R = 180,
                    int = null
                //初始化canvas画布
                function init() {
                    canvas = document.createElement(‘canvas’)
                    canvas.width = 456
                    canvas.height = 456
                    context = canvas.getContext(‘2d’)
                    document.body.appendChild(canvas)
                }
                //绘制canvas小球
                function draw() {
                    i += 0.02
                    if (i < 2) {
                        var PI = Math.PI * i
                    } else if (i >= 2) {
                        i = 0
                    }
                    var x = Math.sin(PI) * R + 225
                    var y = Math.cos(PI) * R + 225
                    context.fillStyle = ‘#eee’
                    context.fillRect(0, 0, 456, 456)
                    context.fillStyle = ‘rgb(255,0,0)’
                    context.beginPath()
                    context.arc(x, y, 20, 0, Math.PI * 2, true)
                    context.closePath()
                    context.fill()
                }
                //定义动画函数
                function animate() {
                    draw()
                    init = requestAnimFrame(animate)
                }
                //定义开始，暂停动画
                var stopDom = document.getElementById(‘stopAnimation’)
                var startDom = document.getElementById(‘startAnimation’)
                stopDom.onclick = function() {
                    cancelAnimationFrame(init)
                }
                startDom.onclick = function() {
                    cancelAnimationFrame(init) //清除动画行为，类似于clearInterval()方法。
                    init = requestAnimationFrame(animate)
                }
                init()
                animate()
            }
            window.onload = function() {
                animaFuns()
            }
        </script>
        <style type=”text/css”>
            canvas {
                display: block;
                margin: 0 auto;
            }
            #box {
                margin-top: 100px;
                margin-bottom: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id=”box”>
            <button type=”button” id=”startAnimation”>开始动画</button>
            <button type=”button” id=”stopAnimation”>停止动画</button>
        </div>
    </body>
</html>
微信开发的前端与后端区别
微信前端页面怎么开发
web前端开发qq，微信群
赞(0)
前端开发者 » Web前端开发动画深入理解
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论