前端技术-svg简介与snap.svg.js开源项目的使用

前言-为什么学习snap.svg.js

前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅。

(矢量图与位图最大的区别是,它不受分辨率的影响。可以任意放大或缩小图形而不会影响出图的清晰度,

可以按最高分辨率显示到输出设备上,位图即相机拍出来的,由像素块组成的图片。

svg代码可使用Adobe公司的AI软件导出,该Snap.svg也是Adobe的开源项目)

虽然svg、animate并不新鲜,但由于svg的代码是由PC计算出来的,操纵它放大或缩小翻转等更加炫酷的效果。

还是使用js封装好的方法来操作更省时省事一些。

并且移动端的火爆也导致svg这项技术也越来越多的运用在项目中。

言归正传-会用jquery就会用snap.svg.js

先点击看个Demo让您感兴趣。

直接在演示页面看那个鳄鱼头就好了,鼠标移动过去会有交互式的动画。

现在我们要做的就是分析这个效果的原理是什么,不要畏惧,即便它看上去很凶(逃

开启F12选择元素 对准那个会动的上颚点击一下看看代码:

这时候我们可以看下点击该元素的代码中有一大堆好像前端从来都不需要用到的标签..(起码我一开始接触svg是这样认为的)

那我们就需要知道这些标签的作用,才能灵活的运用它们。为了通俗易懂,我只简介demo中的标签,想知道更详细的请去查下资料。

<g></g>   :理解为一个块,即那个鳄鱼并不是一张图片,是由N个g(块)组成的,就跟平时重构一样,无数个div嵌套,分离,把它看作一个容器,我们需要操纵容器来进行动画。

<polygon> :标签用来创建含有不少于三个边的图形。

<line>        :标签用来创建线条。

接下来看下源码是什么样的

我们把F12窗口缩小点放在一边,当鼠标移动到上颚的时候,观察下F12中上颚部分的这段代码,见图。

可以看到id="upper-jaw"的g标签中 transform=matrix(1,0,0,1,0,0)这六个数值在不断的变化,也就是我们所见到的动画效果。(matrix()资料我会贴在文章尾部,现在不需要去理解,比较费劲)

上面说过了,会用jquery就会用snap.svg.js,真的很简单,下面我贴代码让我们来look look,别忘了在此之前引入snap.svg.js。(下载snap,要在wamp环境下运行)

        window.onload = function () {

            var croc = Snap.select("#crocodile"),
                head = croc.select("#upper-head"),
                jaw = croc.select("#upper-jaw"),//获取到了鳄鱼的上颚
                symbol = croc.select("#symbol"),
                timer;

            var pivots = [
                [44, 147],//matrix动画效果的值
                [92, 126]
            ];

            //鼠标离开时触发的函数-即合上大嘴
            function close() {
                clearTimeout(timer);

                head.animate({
                    transform: "r" + [8, pivots[0]]
                }, 500, mina.backin);

                jaw.animate({
                    transform: "r" + [37, pivots[1]]
                }, 500, mina.backin);

                timer = setTimeout(function () {
                    symbol.animate({
                        transform: "t-70,40r40"
                    }, 100);
                }, 400);
            }

            //鼠标hover时触发的函数-即合上大嘴
            function open() {
                clearTimeout(timer);

                head.animate({
                    transform: "r" + [0, pivots[0]]
                }, 700, mina.elastic);

                jaw.animate({
                    transform: "r" + [0, [92, 200]]
                }, 700, mina.elastic);

                symbol.animate({
                    transform: "t0,0r0"
                }, 500, mina.elastic);
            }

            timer = setTimeout(close, 50);

            //定义事件触发条件
            croc.hover(open,
                function () {
                    timer = setTimeout(close, 200);
                }
            );
        };

我相信会jquery的肯定一看就懂了,无非就是获取元素,调用封装好的方法来达到效果。

篇幅原因(或者是我饿了?感觉有些地方可能没讲细,留言我会及时回复的。

接下来我们需要做的是了解Snap.svg.js的API,我剩下要做的也就是留下一堆资料地址,两袖清风了(泪..

Snap.svg.js中文API

理解CSS3 transform中的Matrix(矩阵)

最后感谢张鑫旭博客的资料。

------------------------------最后的最后(吐个槽-----------------------------------------------

我本来想贴个天鳄食月的效果。。但是没找到CDN,没贴上来,我也懒得整了..放在电脑里自己欣赏吧。。

最后..(没完了没完了

下星期三就要入职了,昨天刚拿到离职证明,离开第一家公司还是比较怀念的,虽然有点坑吧,但还是挺美好的回忆啊 ~ 感叹下( ̄︶ ̄) 涨

时间: 2024-10-23 11:08:03

前端技术-svg简介与snap.svg.js开源项目的使用的相关文章

web前端技术内容详解之Vue.js框架

Vue.js是一个渐进式框架,只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手.在用Vue.js构建大型应用时推荐使用NPM安装,但是需要注意npm的版本需要大于3.0.在通过npm安装项目后,我们需要对其目录进行解析:(1)Build:项目构建(webpack)相关代码;(2)config:配置目录,包括端口号等.(3)node_modules:npm加载的项目依赖模块(4)src:这个目录当中的内容包含了我们基本上要做的事情,这里包含了几个文件:(一)assets:存

SLAM前端技术选择思考

以前是专门做室内定位技术研究的,先后学习和分析了多种基于电磁的室内定位技术,如WiFi指纹定位(先后出现过RSSI.CTF.CIR多种指纹特征).WiFi ToF定位.低功耗蓝牙BLE以及iBeacon定位,调研和测试过超宽带(UWB)定位技术.地磁指纹定位等技术.后面有时间会准备一个适用场景和性能指标的详细对比分析. 室内定位技术通常以定位区域的精准结构及地图已知为前提,随着机器人相关技术的发展和应用场景的逐步拓展,同步定位与地图构建SLAM技术日益重要,近两个月学习和测试了下SLAM相关的技

snap.svg实现弹性侧栏菜单

p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 效果预览 众所周知,flash动画类型可以分为补间动画和逐帧动画,补间动画又可以分为属性改变(大小.位置.颜色等)和形状改变(直线变弧线等).网页动画里,我们可以使用css3.javascript(jquery)等实现属性改变,却对形状改变无能为力,那么如何实现网页动画里的形状改变呢?今天提供一种解决方案--通过snap.svg动态改变svg形状实现,案例效果如下图所示,案例灵感来自codrop

SVG系列教程:SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu

js前端技术

一.前端技术 1.HTML HTML(hypertext markup language)超文本标记语言,不同于编程语言. 超文本就是超出纯文本的范畴,描述文本的颜色.大小.字体. HTML由一个个标签组成,标签各司其职,有的提供网页信息,有的负责图片,有的负责网页布局. 超文本需要显示,就得有软件呈现超文本定义的排版格式,,例如显示图片.表格.显示字体的大小,颜色,软件就是浏览器. 超文本的诞生是为了解决纯文本不能格式显示问题,是为了好看,但是只用通过网络分享超文本的内容,所以制定了HTTP协

使用Snap.svg类库实现的抖动式的幻灯播放效果

在线演示 本地下载 这个幻灯中.使用了SVG来生成具有动画弧度的幻灯背景效果.假设你在项目中可以支持现代浏览器的话.尝试一下这个效果吧,非常赞! 想了解基础使用,观看这个藐视频吧:Snap.svg处理和操作SVG图形

svg简介与使用

什么是svg SVG是"Scalable Vector Graphics"的简称.中文可以理解成"可缩放矢量图形". 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 关键词:SVG是可缩放矢量图形,1999年由万维网联盟发布.于2013年成为W3C推荐标准. SVG是指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改

Web前端技术--网络三剑客(HTML、CSS、JavaScript)什么是新网络三剑客?以及其他前端技术(JQuery、Vue.js)。

一.Web前端技术--网络三剑客 1.HTML是什么? HTML,全称HYPER TextMarkup Language (超文本标记语言).HTML是一门描述性语言,它是网页的标准语言,并不是一门编程语言. 2.CSS是什么? CSS,全称Cascading Style Sheet(层叠样式表),是用来控制网页外观的一种技术. 3.JavaScript 是什么? JavaScript ,就是我们通常说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行.   “HTML”是网

大前端技术系列:TWA技术+TensorFlow.js =&gt; 集成原生和AI功能的app

大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWxy/twa-tf.js , ) 什么是TWA 简单来讲,TWA(Trusted Web Activity 可信任的网络应用)即: 基于Chrome Custom Tabs,利用谷歌浏览器提供的api,实现强大功能的桌面应用技术. 如果说你对PWA这个概念有所了解,那么TWA的实现就相当于 PWA + 更丰