SVG图标动画

下载代码

html

css

分享到微信朋友圈

html

<p>Web, Mobile Web and Apps</p>
        </li>

<p>Social</p>

</li>

</li>

<p>Interactive Installation</p>
        </li>

</li>

<p>Events</p>
        </li>

<p>Brand Identity</p>

</li>
    </ul>
</div>

css

body {
  font-family: "Georgia", serif;
  font-size: 13px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  text-rendering: geometricPrecision;
  font-smooth: always;
  font-smooth: never;
  font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #333333;background-color: #fff;
}

.intro-text {
  font-size: 28px;
  font-style: italic;
  line-height: 14px;
}

.intro-text span {
  font-size: 10px;
}

.wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

ul {
  width: 100%;
  list-style: none;
  padding: 0;
  text-align: justify;
}
ul::after {
   width: 100%;
  display: inline-block;
  content: ".";
  visibility: hidden;
}

li {
   text-align: left;
   width: 220px;
   display: inline-block;
   margin-right: 0;
   padding-bottom: 30px;
}

li .image {
  display: table;
  vertical-align: bottom;
  width: 100%;
  min-height: 108px;
  max-height: 108px;
  height: 108px;
  margin-bottom: 25px;
}
li .image .row {
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
}
svg {
  vertical-align: bottom;
  width: auto !important;
}

JavaScript

var AnimateInteractive = function($main) {

this.svgContainer = $main.find("#interactive-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.finger = this.svgContainer.find('#finger');
    this.buttonbg = this.svgContainer.find('#button_bg');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true,
        onComplete: function() {
            //this.restart();
        }
    })
        .to(this.finger, 0.4, {
            x: -21,
            y: 20,
            delay: 0.7
        })
        .to({
            fake: 0
        }, 0.3, {
            fake: 30
        })
        .to(this.buttonbg, 0.01, {
            opacity: 1
        }, 1)
        .to(this.finger, 0.7, {
            x: 0,
            y: 0
        })
        .to(this.buttonbg, 0.2, {
            opacity: 0
        }, 1.3);

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));

};

var AnimateHTML = function($main) {
    this.svgContainer = $main.find("#html5-skill");

if (this.svgContainer.length === 0) {
        return;
    }
    this.star = this.svgContainer.find('#star');
    this.status = false;
    this.star.css('transform-origin', '56.5px 44.5px 0');

.to(this.star, 0.14, {
        rotationY: 90,
        ease: Linear.easeNone
    }, 0.66)
        .to(this.star, 1.00, {
            y: 0,
            ease: Bounce.easeOut
        }, 0.80)

.to(this.star, 0.14, {
        rotationY: 0,
        ease: Linear.easeNone
    }, 0.85);

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.restart();
    }.bind(this));

};

var AnimateEvents = function($main) {
    this.svgContainer = $main.find("#event-skill");

if (this.svgContainer.length === 0) {
        return;
    }
    this.flag = this.svgContainer.find('#flag');

this.stick = this.svgContainer.find('#stick');
    this.stickPath = this.stick.find('path');

this.flag.css({
        'transform-origin': '80px 0 0'
    });

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true
    })
        .set(this.flag, {
            rotationY: 90
        })
        .set(this.stick, {
            y: 35
        })
        .set(this.stickPath, {
            'fill-opacity': 0
        })
        .to(this.stick, 0.7, {
            y: 0
        })
        .to(this.stickPath, 0.7, {
            'fill-opacity': 1
        }, 0)
        .to(this.flag, 2.5, {
            rotationY: 360
        })
        .to(this.flag, 2.5, {
            rotationY: 0
        });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.restart();
    }.bind(this));

};

var AnimateSDK = function($main) {
    this.svgContainer = $main.find("#sdk-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.bolt = this.svgContainer.find('#bolt');
    this.key = this.svgContainer.find('#key');

this.bolt.css('transform-origin', '33px 82px 0');
    this.key.css('transform-origin', '43px 70px');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true,
        onComplete: function() {
            this.restart();
        }
    })
    .to(this.key, 0.7, {
        x: -11,
        y: 11
    })
    .to([this.key, this.bolt], 0.6, {
        rotation: 20,
        ease: RoughEase.ease.config({
            strength: 3.6,
            points: 4,
            template: Bounce.easeOut,
            randomize: false,
            taper: "out",
            clamp: true
        })
    })
    .to([this.key, this.bolt], 0.4, {
        rotation: 0
    })
    .to(this.key, 0.7, {
        x: 0,
        y: 0
    });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));
};

var AnimateSocial = function($main) {
    this.svgContainer = $main.find("#social-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.person_a = this.svgContainer.find('#person_a');
    this.person_b = this.svgContainer.find('#person_b');

this.person_a.css('transform-origin', 'center bottom');
    this.person_b.css('transform-origin', 'center bottom');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true,
        onComplete: function() {
            this.restart();
        }
    })
    .to(this.person_a, 0.2, {
        y: -10
    })
    .to(this.person_a, 0.2, {
        y: 0
    })
    .to(this.person_a, 0.2, {
        y: -8
    })
    .to(this.person_a, 0.2, {
        y: 0
    })
    .to(this.person_b, 0.2, {
        y: -10
    })
    .to(this.person_b, 0.2, {
        y: 0
    })
    .to(this.person_b, 0.2, {
        y: -8
    })
    .to(this.person_b, 0.2, {
        y: 0
    });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));
};

var AnimateUX = function($main) {
    this.svgContainer = $main.find("#ux-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.blink = this.svgContainer.find('#blink');
    this.pupil = this.svgContainer.find('#pupil');

this.pupil.css('transform-origin', '27px -40px');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true,
        onComplete: function() {
            this.restart();
        }
    })
    .to(this.blink, 0.001, {
        opacity: 1,
        delay: 0.2
    })
    .to(this.blink, 0.1, {
        opacity: 0,
        delay: 0.2
    })

.to(this.pupil, 0.3, {
        x: 1,
        y: 0
    })
    .to(this.pupil, 0.3, {
        x: -1,
        y: 0
    })
    .to(this.pupil, 0.3, {
        x: 0,
        y: 0
    })
    .to(this.blink, 0.001, {
        opacity: 1,
        delay: 0.2
    })
    .to(this.blink, 0.001, {
        opacity: 0,
        delay: 0.2
    })
    .to(this.blink, 0.001, {
        opacity: 1,
        delay: 0.2
    })
    .to(this.blink, 0.001, {
        opacity: 0,
        delay: 0.2
    })
    .to(this.pupil, 0.3, {
        x: 0,
        y: 0
    });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));
};

var AnimateWeb = function($main) {
    this.svgContainer = $main.find("#web-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.mobile = this.svgContainer.find('#mobile');
    this.mobile2 = this.svgContainer.find('#mobile2');
    this.desktop = this.svgContainer.find('#desktop');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true,
        onComplete: function() {
            this.restart();
        }
    })
    .to(this.desktop, 0.5, {
        x: 13,
        delay: 1
    })
    .to([this.mobile, this.mobile2], 0.5, {
        x: -6,
        delay: 1
    }, 0)
    .to(this.mobile2, 0, {
        opacity: 1
    })
    .to([this.mobile, this.mobile2, this.desktop], 0.5, {
        x: 0
    })
    .to(this.desktop, 0.5, {
        x: 13,
        delay: 1
    })
    .to([this.mobile, this.mobile2], 0.5, {
        x: -6,
        delay: 1
    }, 2.0)
    .to(this.mobile2, 0, {
        opacity: 0
    })
    .to([this.mobile, this.mobile2, this.desktop], 0.5, {
        x: 0
    });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));
};

var AnimateBrand = function($main) {

this.svgContainer = $main.find("#brand-skill");

if (this.svgContainer.length === 0) {
        return;
    }

this.pen = this.svgContainer.find('#pen');
    this.penHeight = 40;
    this.penWidth = 82;

this.heart = this.svgContainer.find('#heart');

this.heartPath = this.heart.find('#heartpath')[0];

if (!this.heartPath) {
        return;
    }

this.pathobj = {
        length: 0,
        pathLength: this.heartPath.getTotalLength()
    }
    
    this.pen.css('transform-origin', '23px 100px 0');

this.timeLine = new TimelineMax({
        yoyo: true,
        paused: true
    })
    .to(this.pen, 0.4, {
        rotation: 45
    })
    .to(this.pathobj, 1, {
        length: this.pathobj.pathLength,
        ease: Linear.easeNone,
        onUpdateScope: this,
        onUpdate: function() {
            this.heartPath.style.strokeDasharray = [this.pathobj.length, this.pathobj.pathLength].join(' ');

var coords = this.heartPath.getPointAtLength(this.pathobj.length);

coords.y = coords.y - 102;
            coords.x = coords.x - 22;
            this.pen.css('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px) rotate(45deg)');

}
    });

this.svgContainer.off('runAnimation').on('runAnimation', function() {
        this.timeLine.play();
    }.bind(this));

this.svgContainer.off('stopAnimation').on('stopAnimation', function() {
        this.timeLine.reverse();
    }.bind(this));
};

function setSkillAnimation($main) {
    new AnimateInteractive($main);
    new AnimateHTML($main);
    new AnimateEvents($main);
    new AnimateSDK($main);
    new AnimateSocial($main);
    new AnimateUX($main);
    new AnimateWeb($main);

var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

if(!is_firefox){  
        //firefox 31 bug - https://bugzilla.mozilla.org/show_bug.cgi?id=1044355
        new AnimateBrand($main);
    }

$main.find("#skills li").on('mouseenter touchstart', function(e) {

if(e.type == 'touchstart'){
                $("#skills li").find('svg').trigger('stopAnimation');
            }

$(this).find('svg').trigger('runAnimation');
     }).on('mouseleave', function() {
            $(this).find('svg').trigger('stopAnimation');
      });

}

setSkillAnimation($('body'));

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg