Granim.js

Granim.js는 그라데이션 애니메이션을 표시할 수 있는 JavaScript 라이브러리입니다.
이걸 사용하면 풍부한 사이트를 만들 수 있어요!
애니메이션을 어떻게 표시하는지 공식 사이트첫 페이지와 Examples를 보십시오.

이거 그라임.제이스를 블루로 만들어.js 프로그램에서 사용해 보십시오.

절차.

1.Gramin.js 설치

npm install granim

2. 구성 요소 제작

granim.vue

<template>
  <div>
    <canvas id="granim-canvas"></canvas>
  </div>
</template>

<script>
import Granim from 'granim'

export default {
  name: 'granim',
  data () {
    return {
      GObj: Object
    }
  },
  mounted () {
    this.GObj = new Granim({
      element: '#granim-canvas',
      name: 'granim',
      opacity: [1, 1],
      states: {
        'default-state': {
          gradients: [
             ['#29323c', '#485563'],
             ['#FF6B6B', '#556270'],
             ['#80d3fe', '#7ea0c4'],
             ['#f0ab51', '#eceba3']
          ]
        }
      }
    })
  }
}
</script>

<style scoped>
#granim-canvas {
  width: 100vw;
  height: 100vh;
}
</style>

키모는 어셈블리의 mounted 라이프 사이클에 새로운 Granim을 연결합니다.
mounted () 에서 기술한 코드는 공식 사이트 에서 기술한 대로 OK.
new 옵션을 사용하여 속도와 색상 등 다양한 표현을 지정할 수 있습니다.
※ 위 샘플 코드에는 ESLight의 오류를 피하기 위해 new의 Granim 인스턴스가 데이터에 대입되었습니다.

3. 완성!

변량

Granim.js를 사용하면 점차적인 변화를 할 수 있을 뿐만 아니라 그림과 조합하거나 문자에 점차적인 애니메이션을 추가할 수 있습니다.공식 사이트에 방법이 있습니다.