组件用.vue还是.js_与Three.js一起使用的Vue.js 2.0幻灯片组件

组件用.vue还是.js

Vue位移幻灯片放映 (vue-displacement-slideshow)

Webgl image displacement transitions made simple. A Vue.js 2.0 slideshow component working with Three.js and GSAP.

Webgl图像位移过渡变得简单。 与Three.js和GSAP一起使用的Vue.js 2.0幻灯片组件。

安装 (Installation)

NPM (NPM)

npm i --save vue-displacement-slideshow

例 (Example)

<template>
    <vue-displacement-slideshow 
            :images="images"
            displacement="require('../assets/displacement.png')"
            :intensity.number="0.2"
            :speedIn.number="1.4"
            :speedOut.number="1.4"
            ease="Expo.easeInOut"
            ref="slideshow"></vue-displacement-slideshow>
</template>
    
<script>
    import VueDisplacementSlideshow from "vue-displacement-slideshow";
    
    export default {
        components: {
            VueDisplacementSlideshow,
        },
        computed: {
            images() {
                return [
                    require("../assets/images/1.jpg"),
                    require("../assets/images/2.jpg"),
                    require("../assets/images/3.jpg")
                ];
            }
        },
        methods: {
            init() {
                //We loop through all our images by calling the 'next' method of our component every 2 seconds
                setInterval(() => {
                    this.$refs.slideshow.next();
                }, 2000);
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

This component is heavily based on this library : https://github.com/robin-dela/hover-effect

该组件很大程度上基于此库： https : //github.com/robin-dela/hover-effect

道具 (Props)

name	type	description	required	default value
images	Array	An array containing the paths of the images you wan to use	true	[]
displacement	String	The path of the displacement image	true	none
intensity	Number	The intensity of the displacement	false	1
speedIn	Number	The duration of the animation for the next image, in seconds	false	1
speedOut	Number	The duration of the animation for the previous image, in seconds	false	1
ease	String	The GSAP easing to use	false	Expo.easeOut

名称	类型	描述	需要	默认值
图片	数组	一个数组，其中包含您要使用的图像的路径	真正	[]
移位	串	位移图像的路径	真正	没有
强度	数	位移强度	假	1个
speedIn	数	下一张图片的动画持续时间(以秒为单位)	假	1个
speedOut	数	上一张图片的动画持续时间(以秒为单位)	假	1个
缓解	串	GSAP轻松使用	假	易展性

方法 (Methods)

Name	Description
next	Transition to the second image.
previous	Transition to the first image.

名称	描述
下一个	过渡到第二张图片。
以前	过渡到第一个图像。

行为 (Behavior)

The first image of the array is displayed at first. When we call the next method while currently showing the last image, it will go to the first image. When we call the previous method while currently showing the first image, it will go to the last image.

首先显示阵列的第一个图像。 当前显示最后一张图片时，当我们调用next方法时，它将转到第一张图片。 当我们在当前显示第一张图片的同时调用previous方法时，它将转到最后一张图片。

The images are displayed as we would use background-size:cover in CSS.

这些图像的显示方式与我们在CSS中使用background-size:cover的方式相同。

翻译自: https://vuejsexamples.com/a-vue-js-2-0-slideshow-component-working-with-three-js/

组件用.vue还是.js