vue-anime-typing

vue-anime-typing

Many typing effects for vue

install

npm i vue-anime-typing

simple usage

<anime-typing>浔阳江头夜送客</anime-typing>

props

text

Type: String content which is used when default slot text is not set

offset

Type: Number Playing effect delay by ms. default : 0

duration

Type: Number The duration of single char animation from hide to show, by ms. default is 1000

delay

Type: Number the delay of each char with previous by ms

animation-in

Type: Number the single char 'in' effects. default is bounceDown. see Default animation below

defined-animations

Type: Object to define your own animations beside defaults see Default animation below

playing

Type: Boolean default true. if set to false, the typing effect would accour when playing change to false

easing

entrance easing

Types	Examples	Infos
String	'easeOutExpo'	Built in function names
Array	[.91,-0.54,.29,1.56]	Custom Bézier curve coordinates ([x1, y1, x2, y2])

easeIn	easeOut	easeInOut
easeInQuad	easeOutQuad	easeInOutQuad
easeInCubic	easeOutCubic	easeInOutCubic
easeInQuart	easeOutQuart	easeInOutQuart
easeInQuint	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine	easeInOutSine
easeInExpo	easeOutExpo	easeInOutExpo
easeInCirc	easeOutCirc	easeInOutCirc
easeInBack	easeOutBack	easeInOutBack
easeInElastic	easeOutElastic	easeInOutElastic

groupStyle

style object for all

charStyle

style for each char

Build-in default animations

• fadeIn
• bounceDown
• bounceUp
• slideInLeft
• zoomIn
• rotateRightIn
• rollTopIn
• rollRightIn

Defined animation

add your animations with animateFrom and animateTo and set them to defined-animations property

Example

<template>
  <div id="app">
    <anime-typing>浔阳江头夜送客</anime-typing>
    <anime-typing animation-in="fadeIn" :offset="1000">枫叶荻花秋瑟瑟</anime-typing>
    <anime-typing animation-in="bounceUp" :offset="2000">主人下马客在船</anime-typing>
    <anime-typing animation-in="slideInLeft" :offset="3000">举酒欲饮无管弦</anime-typing>
    <anime-typing animation-in="zoomIn" :offset="4000" :duration="200" easing="linear">醉不成欢惨将别</anime-typing>
    <anime-typing animation-in="rotateRightIn" :offset="5000" :duration="1000" :delay="500" @complete="isShowContinue=true">别时茫茫江浸月</anime-typing>
    <anime-typing animation-in="rotateRightIn" :offset="9000" :duration="200" :delay="200">忽闻水上琵琶声</anime-typing>
    <anime-typing animation-in="rollTopIn" :offset="10000" :duration="400" :delay="200" easing="linear">主人忘归客不发</anime-typing>
    <anime-typing animation-in="rollRightIn" :offset="11000" :duration="400" :delay="200" easing="linear">寻声暗问弹者谁</anime-typing>
    <anime-typing animation-in="defined" :offset="13000" :duration="400" :delay="200" easing="linear" :defined-animations="definedAnimation">琵琶声停欲语迟</anime-typing>
  </div>
</template>

<script>
import AnimeTyping from '../src/AnimeTyping'

export default {
  name: 'app',
  components: {
    AnimeTyping
  },
  data () {
    return {
      isShowContinue: false,
      togglePlay: false,
      definedAnimation: {
        defined: {
          animateFrom: {
            rotateY: '120deg',
            translateX: -20,
            opacity: 0
          },
          animateTo: {
            rotateY: '0',
            translateX: 0,
            opacity: 1
          }
        }
      }
    }
  },

  methods: {
    replay () {
      debugger
    },
    clickContinue () {
      this.togglePlay = true
    }
  }
}
</script>

<style lang="less">
  #app {
    text-align: center;
    font-size: 20px;
  }
</style>