使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。
基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。
requestAnimationFrame接口
我们使用requestAnimationFrame接口来实现动画帧的绘制,该接口告诉浏览器在重画(repaint)之前先执行一个动画回调函数。
通过这样的回调机制,浏览器可以把多个动画函数执行完成后再统一绘制,提高动画渲染性能。
(function() { for (var d = 0, a = ["webkit", "moz"], b = 0; b < a.length && !window.requestAnimationFrame; ++b) window.requestAnimationFrame = window[a[b] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[a[b] + "CancelAnimationFrame"] || window[a[b] + "CancelRequestAnimationFrame"]; window.requestAnimationFrame || (window.requestAnimationFrame = function(b) { var a = (new Date).getTime(), c = Math.max(0, 16 - (a - d)), e = window.setTimeout(function() { b(a + c) }, c); d = a + c; return e }); window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) { clearTimeout(a) }) })();
上面实现的是一个兼容各浏览器并可以安全降级的requestAnimationFrame版本,当浏览器不支持时,回退到setTimeout/clearTimeout定时函数。
Border对象
现在我们需要创建一个Border对象,用来表示绕边的那个动画对象。该Border对象的宽高和按钮元素接近,并包含一个canvas对象。
function Border(opt) { // 参数opt即为传入的button元素 this.elem = opt.elem; this.active = false; this.canvas = document.createElement('canvas');//创建画布 this.ctx = this.canvas.getContext('2d');//获取画布上下文 this.width = this.canvas.width = this.elem.outerWidth();//设置宽 this.height = this.canvas.height = this.elem.outerHeight();//设置高 this.borderSize = parseInt(this.elem.css('border-left-width'), 10);//设置边宽 this.waypoints = [ [0, 0], [this.width - this.borderSize, 0], [this.width - this.borderSize, this.height - this.borderSize], [0, this.height - this.borderSize] ];//设置路标数组 this.tracer = { x: 0, y: 0, color: opt.color, speed: opt.speed, waypoint: 0 };//设置路径对象 this.canvas.style.top = -this.borderSize + 'px'; this.canvas.style.left = -this.borderSize + 'px'; this.elem.append($(this.canvas));//把canvas内置到button元素中。 }
然后我们实现循环绕边的函数,由于这是Border对象的一个行为,我们把它实现为其原型对象的一个方法:
Border.prototype.loop = function() { requestAnimationFrame($.proxy(this.loop, this));//定时调用自身 this.ctx.globalCompositeOperation = 'source-over';//源覆盖目标的合成模式 this.ctx.fillStyle = this.tracer.color; this.ctx.fillRect(this.tracer.x, this.tracer.y, this.borderSize, this.borderSize);//在当前路径上绘制小方块(本例是4*4px) //下面这段代码是通用算法,用来计算某段路径上x/y方向上的速度分量,同时判断下一步是否需要拐弯(在路标处) var previousWaypoint = (this.tracer.waypoint == 0) ? this.waypoints[this.waypoints.length - 1] : this.waypoints[this.tracer.waypoint - 1], dxTotal = previousWaypoint[0] - this.waypoints[this.tracer.waypoint][0], dyTotal = previousWaypoint[1] - this.waypoints[this.tracer.waypoint][1], distanceTotal = Math.sqrt(dxTotal * dxTotal + dyTotal * dyTotal),//该段路径总长度 angle = Math.atan2(this.waypoints[this.tracer.waypoint][1] - this.tracer.y, this.waypoints[this.tracer.waypoint][0] - this.tracer.x), vx = Math.cos(angle) * this.tracer.speed, vy = Math.sin(angle) * this.tracer.speed, dxFuture = previousWaypoint[0] - (this.tracer.x + vx), dyFuture = previousWaypoint[1] - (this.tracer.y + vy), distanceFuture = Math.sqrt(dxFuture * dxFuture + dyFuture * dyFuture);//在该路径上的总移动距离 if (distanceFuture >= distanceTotal) {//已移动距离超过路径长度,则需要拐弯,即更新路标 this.tracer.x = this.waypoints[this.tracer.waypoint][0]; this.tracer.y = this.waypoints[this.tracer.waypoint][1]; this.tracer.waypoint = (this.tracer.waypoint == this.waypoints.length - 1) ? 0 : this.tracer.waypoint + 1; } else {//否则,在当前路径上移动位置 this.tracer.x += vx; this.tracer.y += vy; } }
有了Border对象后,我们来实际使用它。(在C++等面向对象语言中,我们通常称上面定义了一个类Class,在实际使用时,需要创建类的实例,即对象Object)。
var button = $("#your_button_id")[0]; $this = $(button); var border = new Border({ elem: $this, color: $this.data('color'), speed: $this.data('speed') }); $(border.canvas).stop(true).animate({ 'opacity': 1 }, 400); border.loop();
这样我们就实现了一个按钮的绕边动画。
在线实例
你可以通过在线实例自己试试看,还可以基于这个简化版本添加渐变效果和鼠标悬停交互处理,乃至实现不规则形状按钮的描边动画。
最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
谷歌ARCore技术特性简介
谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...
WebGL、Asm.js和WebAssembly概念简介
随着HTML技术的发展,网页要解决的问题已经远不止是简单的文本信息,而包括了更多的高性能图像处理和3D渲染方面。这正是要引入WebGL、Asm.js和WebAssembly这些技...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
HTTP/2背景和新特性简介
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
更多...