WEB前端动画库汇总篇(应有尽有)

作为前端开发人员动画效果是硬性要求,如果还不会就得开始学习啦,像我这样的新手一开始应该要懂得站在巨人的肩膀上,先把别人的东西用起来,熟悉了之后就可以模仿别人的实现,研读别人的代码,好了不多说,还是赶紧走进动感世界吧! dynamics.js。一个用于创建物理运动动画的 JavaScript 库,非常的实用,不管是对象、DOM 元素、还是 SVG 都驾驭得了。 bounce.js。它可以让你生成一系列非常有动感的动画效...

2017
11-10

Dynamics.js 一个简单强大的物理运动动画库

前言 这是一篇没有什么技术含量的文章,因为本次只是来分享一个简单但强大的物理运动动画库,他们可让你的元素、对象、SVG 变得魅力十足。我是在学习Canvas 过程中用到这个 JavaScript 动画库的,觉得还不错,所以就单独成文,把它分享给大家。虽然网上有很多关于 Dynamics.js  的资料,但我毕竟是我,我只是记录自己的一切。 官网首页的清爽让我不得不截图以证清白: 虽然图片有点抢镜,但我就是喜欢。...

2017
11-09

Canvas 动画之多对象边界碰撞运动

前言 学习的道路永远没有尽头,除非……。之前分享过两篇文章《Canvas 动画之多对象运动》和《Canvas 动画之来回运动的小圆》,可以说本文是基于这两篇博文之上做出来的效果。都说一步一个脚印,记录下来了才知道自己当初是怎么走过来的。好了,马上开始今天的分享,老规矩上第二道菜: HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...

2017
11-05

Canvas 动画之多对象自由落体运动

在上一篇文章中分享了《Canvas 实现多对象运动动画》,此次分享的是在它的基础上进行代码修改,实现多个小球作自由落体运动的动画效果。一步一个脚印,记录下来,在自己回过头来看时能清楚地看到 Canavs 之路首阻且长的辛酸史。 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 多对象自由落体运动动画-云库前端<...

2017
11-03

Canvas 动画之多对象运动

前言 之前分享过一篇文章《Canvas 动画之来回运动的小圆》,对于很多朋友而言,这都是小菜一碟。不管怎么说,这都是自己走过的路,记下来也不一定有很大作用,但至少可以给自己一个交代,对于以后都是美美的回忆。本文要分享的是基于上面这篇文章的。但会比上面这篇文章更让人为之动容,不信?咱们走走瞧。 在这里没有过多的话要说,作为一个准前端开发程序员,代码也许就是我对你最冲动的告白。 HTML 代...

2017
11-02

Canvas 征战之旅

前言 Canvas 的使用越来越多,比如百度的 echart.js 就是用canvas 实现的。在没有看到类似 echart.js 这样的惊人效果后,我一直不相信 Canvas 是如此惊艳。为了说服自己在网上也查阅了很多有关于 Canvas 的例子。真的可以很炫。于是就开始了Canvas 之旅,但是本文要说的不是 Canvas 如何如何,而是把在学习 Canvas 时的一些坑也好,技巧也好,或者说是解决方案也罢,都统统记录下来,以便前人种树,后人...

2017
11-01

JavaScript 中的 this 关键字

前言 关于 JavaScript 中的 this 关键字相信你已经早已感受到它的存在了,或者对他也已经有一知半解了,但本文要分享的关于 this 的东西你确定全都知道吗?可能不一定! this 之旅 this 总是指向一个对象,这一点已经家喻户晓了,包括你也不例外。但在不同的情况下它的指向也是不一样的,得具体情况具体分析。我们通过几个例子来感受感受 this 的博大精深。 场景一 直接打印 console.log(this); //...

2017
10-26

移动端 input 输入框弹出键盘时页面被吊打的解决方案

前言 IOS 的兼容永远是前端开发的一个伤心地,虽然是这样,但你也没有办法,毕竟果粉还不是一般的少,当 IOS 键盘遇到 fixed 的时候,你除了感到无助外,更多的是绝望。不过现在曙光就在眼前,只要你把这篇文章仔细阅读完。 说走就走的旅程 首先我们得知道一个事实,那就是在绝大部安卓机中,只要你按常理出牌(常用布局),一般情况下点击输入框弹出手机键盘都不会有什么问题。这里我们不妨假设一个常...

2017
10-24

Canvas 动画之来回运动的小圆

正如标题所说的,本文是要实现一个无限循环运动(直线运动)的小圆。通过本文你可以学到在 Canvas 中最基本的动画制作。这个动画有如下特点: 无限循环运动(上下来回运动) 随机速度 随机加速度 随机的圆大小 随机的圆初始位置 好了,废话不多说,我们真接来看代码,没有代码解决不了的问题: 超简单的HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta...

2017
10-23

JavaScript 关于元素滚动的多种场景

在这里文章虽然说是多种场景,其实说白也就是元素的内容滚动,只是对象不一样罢了(如:body 或者 div)。怎么实现元素滚动到其内容的指定位置?实现元素滚动到底部有什么应用场景?等这些问题一个个从脑中浮现。现在让我们来看看怎么实现。 首先我们最常用见或者最常用的就是浏览器默认的滚动元素 body,比如滚动到页面指定的位置,或者滚动到页面的底部,这太常见了。但是在本文中我们不用 body 来作为例...

2017
10-19