svg动画类库Snap.svg简介

JavaScript012

svg动画类库Snap.svg简介,第1张

SVG元素是一种特殊的DOM元素，可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样式属性的完整控制，现在介绍一个专门的SVG动画类库Snap.svg，其github地址为： https://github.com/adobe-webplatform/Snap.svg

Snap.svg提供多种安装方式。

功能描述： 创建或加载已有的SVG元素。

参数说明：

返回值： SVG元素

功能描述： 根据JS选择器加载SVG元素内已有的图形元素。

参数说明：

返回值： 选择器命中的元素Element，当存在多个命中的元素时，只返回第一个元素

功能描述： 在SVG元素内绘制一个圆。

参数说明：

返回值： 新建的circle元素Element

功能描述： 在SVG元素内绘制一条Path。

参数说明：

返回值： 新建的path元素Element

功能描述： 在SVG元素内绘制一个矩形。

参数说明：

返回值： 新建的rect元素Element

功能描述： 在一段时间内匀速变更相关属性到目标值。

参数说明：

返回值： 动画对象

功能描述： 根据设置的参数，执行动画操作。

参数说明：

返回值： mina格式的动画对象

功能描述： 执行位移操作。

参数说明：

功能描述： 使推行围绕指定的圆心，旋转一定角度。

参数说明：

初始化参考上面“基本实现步骤”中的相关描述，后续只描述动画控制部分。

《Snap.svg API文档》

《使用 Snap.svg 制作动画》

1.针对上下文的Snapshot技术 什么是上下文（Contexts）？实际是JS应用程序的运行环境，避免应用程序的修改相互影响，例如一个页面js修改内置对象方法toString，不应该影响到另外页面。chrome浏览器每个process只有一个V8引擎实例，浏览器中的每.

一、滚动插件，常用于移动端

二、初始化

    (1)html结构：   

        <div class="wrapper">

            只能让第一个子元素滚动

            <div>

                可放入多个子元素

            </div>

        </div>

    （2）css:  外层盒子是定高的

        <1>直接给定一个高度

        <2>在移动端，如果需要滚动，且需要高度全屏

            position: absolute (定位父元素是body)

            top:0

            bottom:0

    (3) 引入iscroll.js

        var myscroll = new IScroll(".wrapper")

三、自定义配置

        var myscroll = new IScroll(".wrapper"，{

            scrollX: true,  //能够水平滚动

            scrollY： false , //在水平滚动时，禁止垂直滚动

            snap: "li"  // snap: true

            click: true,

            //如果希望监听滚动事件，则不能引入iscroll.js,

            而需要引入iscroll-probe.js, 同时结合 probeType属性

            probeType: 3 // 也可以是1,2

        })

四、iscroll实例支持的事件

    myscroll.on("scroll",function(){})

    myscroll.on("scrollStart",function(){})

    myscroll.on("scrollEnd",function(){})

    myscroll.on("refresh",function(){})

五、iscoll实例的常用属性

    1. this.currentPage.pageX

    2. this.currentPage.pageY

    3. this.currentPage.x

    4. this.currentPage.y

    5. this.x

    6. this.y

六、实例的方法

    1.myscroll.refresh()  //非常重要的方法，在数据更新后，一定要调用一次该方法

    2. myscroll.scrollTo()

    3. myscroll.scrollBy()

    3. myscroll.goToPage()