Animate 动效

何时使用

import { HiAnimate } from 'hi-kits/animate'

基本用法

直接通过设置name来使用即可,会在页面加载完成时触发一次动画效果。

左右晃动

上下晃动

<h-space>
    <h-animate name="shakeX"  duration="10">
        <div id="shakeX" style="background-color: #81ea9d; width:100px; height:100px; color: #fff;text-align:center;line-height: 100px;" onclick=" HiServe.animate.run(document.getElementById('shakeX'), 'shakeX')">左右晃动</div>
    </h-animate>
    <h-animate name="shakeY">
        <div id="shakeY" style="background-color: #f8ccba; width:100px; height:100px;  color: #fff;text-align:center;line-height: 100px;" onclick=" HiServe.animate.run(document.getElementById('shakeY'), 'shakeY')">上下晃动</div>
    </h-animate>
</h-space>

Expand Copy Copy

控制元素动效

通过触发HiServe.animate.run(元素，动效名称) 方法可控制元素呈现不同的动画效果

bounce flash headShake heartBeat

<h-space>
    <h-button type="primary" onclick="HiServe.animate.run(document.getElementById('AnimateBox'), 'bounce')">bounce</h-button>
    <h-button type="primary" onclick="HiServe.animate.run(document.getElementById('AnimateBox'), 'flash')">flash</h-button>
    <h-button type="primary" onclick="HiServe.animate.run(document.getElementById('AnimateBox'), 'headShake')">headShake</h-button>
    <h-button type="primary" onclick="HiServe.animate.run(document.getElementById('AnimateBox'), 'heartBeat',10)">heartBeat</h-button>
</h-space>

Expand Copy Copy

参数说明

h-animate

参数	说明	类型	可选值	默认值
name	动效名称	string	-	-
duration	动效时长 （单位秒/s），此处指完成一次动画的时长	number	-	1
onchange	动画结束时的回调方法	Function	-	-

HiAnimate.run()方法提供了四个参数,可以支持设置动画时长，及回调函数

参数	说明	类型	可选值	默认值
selector	元素选择器名称	string	-	-
name	动效名称	string	-	-
duration	动效时长 （单位秒/s）	number	-	1
callback	回调方法,动画结束后触发	()=>{}	-	-

动效库

Hi-kits 目前提供了98个动画效果可供参考,点击可展示效果

heartBeat

hinge

jackInTheBox

flash

jello

pulse

rubberBand

swing

tada

wobble

shake

shakeX

shakeY

headShake

backInDown

backInLeft

backInRight

backInUp

backOutDown

backOutLeft

backOutRight

backOutUp

bounce

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutUp

bounceOutLeft

bounceOutRight

fadeIn

fadeInBottomLeft

fadeInBottomRight

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInTopLeft

fadeInTopRight

fadeInUp

fadeInUpBig

fadeOut

fadeOutBottomLeft

fadeOutBottomRight

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutTopLeft

fadeOutTopRight

fadeOutUp

fadeOutUpBig

flip

flipInX

flipInY

flipOutX

flipOutY

lightSpeedInLeft

lightSpeedInRight

lightSpeedOutLeft

lightSpeedOutRight

rotateIn

rotateInDownLeft

rotateInUpLeft

rotateInUpRight

rotateInDownRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp