@shijiu/jsview-vue 0.9.502 → 0.9.631

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -33,7 +33,6 @@
  *              功能: 停止精灵图动画，可选择静止在第一帧或最后一帧
  -->
 <script>
-import {Options, Vue} from "vue-class-component";
 import { getKeyFramesGroup } from '../../JsViewVueTools/JsvDynamicKeyFrames.js'
 
 
@@ -71,7 +70,7 @@ function _createTransformStyle(w_scale, h_scale, x, y) {
   return output;
 }
 
-@Options({
+export default {
   props: {
     spriteInfo: Object,
     viewSize: Object,
@@ -82,11 +81,9 @@ function _createTransformStyle(w_scale, h_scale, x, y) {
     loop: Number,
     spriteName: String,
     controller: Object,
-  }
-})
-class JsvSpriteAnim extends Vue {
-    constructor(props) {
-        super(props);
+  },
+
+  created() {
         let stopFrame = "start";
         if (typeof this.$props.autostart === "string" && this.$props.autostart !== "none") {
             stopFrame = this.$props.autostart;
@@ -122,315 +119,315 @@ class JsvSpriteAnim extends Vue {
         this.blinkAnimCache = null;
         this.transform_style = this._AnalyzeProp();
         this.sAnimationToken = 0;
-    }
-
-    stop(end_frame) {
-        if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
-            return;
-        }
-        this.stopped = true;
-        this.stopFrame = end_frame || this.stopFrame;
-    }
+    },
 
-    start(end_frame, duration) {
-        if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
-            return;
-        }
-        this.innerId += 1;
-        this.stopped = false;
-        this.spriteDuration = duration || this.$props.duration;
-        this.stopFrame = end_frame || this.stopFrame;
-    }
+    unmounted() {
+        this._clearExpiredKeyFrames();
+    },
 
-    blink(alphas, duration, ease, delay, repeat) {
-        // 注意：比较数组是否相同仅在此场景下使用toString，其他场景
-        if (!this.blinkAnimCache
-        || (this.blinkAnimCache.alphas.toString() !== alphas.toString()
-        || this.blinkAnimCache.duration !== duration
-        || this.blinkAnimCache.ease !== ease
-        || this.blinkAnimCache.delay !== delay
-        || this.blinkAnimCache.repeat !== repeat)) {
-        const anim_name_base = this._getAnimNameBase();
-        const anim_name_blink = `${anim_name_base}-blink`;
-        let image_keyframs = `@keyframes ${anim_name_blink} {`;
-        const frame_percent = 1 / (alphas.length);
-        for (let i = 0; i < alphas.length; i++) {
-            const alpha = alphas[i];
-            let header;
-            if (i !== alphas.length - 1) {
-                header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
-            } else {
-                header = '100% {';
+    methods: {
+        stop(end_frame) {
+            if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
+                return;
             }
-            image_keyframs += header;
+            this.stopped = true;
+            this.stopFrame = end_frame || this.stopFrame;
+        },
 
-            if (alpha) {
-                const tr_str = ` opacity:${alpha};`;
-                image_keyframs += tr_str;
+        start(end_frame, duration) {
+            if (this.$props.spriteInfo.frames && this.$props.spriteInfo.frames.length === 1) {
+                return;
+            }
+            this.innerId += 1;
+            this.stopped = false;
+            this.spriteDuration = duration || this.$props.duration;
+            this.stopFrame = end_frame || this.stopFrame;
+        },
+
+        blink(alphas, duration, ease, delay, repeat) {
+            // 注意：比较数组是否相同仅在此场景下使用toString，其他场景
+            if (!this.blinkAnimCache
+            || (this.blinkAnimCache.alphas.toString() !== alphas.toString()
+            || this.blinkAnimCache.duration !== duration
+            || this.blinkAnimCache.ease !== ease
+            || this.blinkAnimCache.delay !== delay
+            || this.blinkAnimCache.repeat !== repeat)) {
+            const anim_name_base = this._getAnimNameBase();
+            const anim_name_blink = `${anim_name_base}-blink`;
+            let image_keyframs = `@keyframes ${anim_name_blink} {`;
+            const frame_percent = 1 / (alphas.length);
+            for (let i = 0; i < alphas.length; i++) {
+                const alpha = alphas[i];
+                let header;
+                if (i !== alphas.length - 1) {
+                    header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
+                } else {
+                    header = '100% {';
+                }
+                image_keyframs += header;
+
+                if (alpha) {
+                    const tr_str = ` opacity:${alpha};`;
+                    image_keyframs += tr_str;
+                }
+
+                image_keyframs += '}';
+                image_keyframs += "\n";
             }
-
             image_keyframs += '}';
-            image_keyframs += "\n";
-        }
-        image_keyframs += '}';
-        if (this.keyFrameStyleSheet) {
-            this.keyFrameStyleSheet.insertRule(image_keyframs);
-        }
-        this.blinkAnimCache = {
-            alphas,
-            duration,
-            ease,
-            delay,
-            repeat,
-            blinkAnimName: anim_name_blink
-        };
-        }
-
-        // 参数格式化
-        ease = ease || "";
-        delay = delay || 0;
-        repeat = (repeat === -1) ? "infinite" : (repeat || 1);
-
-        const animName = `${this.blinkAnimCache.blinkAnimName} ${duration}s ${ease} ${delay}s ${repeat}`;
-        this.blinkAnim = animName;
-        this.stopped = true;
-    }
-
-    _getAnimNameBase() {
-        return this.$props.spriteName ? this.$props.spriteName : `sprite-anim-name-${this.sAnimationToken++}`;
-    }
-
-    _updateFrozeFrameCache(image_url, frame_info_list,
-                            canvas_width, canvas_height,
-                            source_width, source_height) {
-        const cache = this.frozeFrameCache;
-
-        const index = this.stopFrame === "start" ? 0 : frame_info_list.length - 1;
-        const tr = _getTransformInfo(
-            frame_info_list[index].source,
-            frame_info_list[index].target,
-            canvas_width,
-            canvas_height
-        );
-
-        cache.clipStyle = {
-            transform: _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy),
-            transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-            overflow: "hidden",
-            left: 0,
-            top: 0,
-            width: canvas_width,
-            height: canvas_height,
-        };
-
-        cache.transStyle = {
-            transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-            transform: _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y),
-            width: source_width,
-            height: source_height,
-        };
-
-        cache.imageStyle = {
-            backgroundImage: image_url,
-            width: source_width,
-            height: source_height,
-        };
-    }
-
-    _updateAnimateFrameCache(image_url, frame_info_list,
-                            canvas_width, canvas_height,
-                            source_width, source_height) {
-        this._clearExpiredKeyFrames();
-
-        if (!frame_info_list) { return; }
-        const anim_name_base = this._getAnimNameBase();
-        const frame_percent = 1 / (frame_info_list.length);
-        const anim_name_clip = `${anim_name_base}-clip`;
-        const anim_name_image = `${anim_name_base}-image`;
-        let image_keyframs = `@keyframes ${anim_name_image} {`;
-        let clip_keyframs = `@keyframes ${anim_name_clip} {`;
-
-        for (let i = 0; i < frame_info_list.length + 1; i++) {
-            let item;
-            if (i !== frame_info_list.length) {
-                item = frame_info_list[i];
-            } else {
-                // 追加一个最后一帧以保证最后一帧可见
-                item = frame_info_list[frame_info_list.length - 1];
+            if (this.keyFrameStyleSheet) {
+                this.keyFrameStyleSheet.insertRule(image_keyframs);
             }
-
-            // Header
-            let header;
-            if (i !== frame_info_list.length) {
-                header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
-            } else {
-                header = '100% {';
+            this.blinkAnimCache = {
+                alphas,
+                duration,
+                ease,
+                delay,
+                repeat,
+                blinkAnimName: anim_name_blink
+            };
             }
-            image_keyframs += header;
-            clip_keyframs += header;
 
-            if (item.source) {
-                const tr = _getTransformInfo(item.source, item.target, canvas_width, canvas_height);
-                const clip_trans = _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy);
-                const image_trans = _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y);
+            // 参数格式化
+            ease = ease || "";
+            delay = delay || 0;
+            repeat = (repeat === -1) ? "infinite" : (repeat || 1);
+
+            const animName = `${this.blinkAnimCache.blinkAnimName} ${duration}s ${ease} ${delay}s ${repeat}`;
+            this.blinkAnim = animName;
+            this.stopped = true;
+        },
+
+        _getAnimNameBase() {
+            return this.$props.spriteName ? this.$props.spriteName : `sprite-anim-name-${this.sAnimationToken++}`;
+        },
+
+        _updateFrozeFrameCache(image_url, frame_info_list,
+                                canvas_width, canvas_height,
+                                source_width, source_height) {
+            const cache = this.frozeFrameCache;
+
+            const index = this.stopFrame === "start" ? 0 : frame_info_list.length - 1;
+            const tr = _getTransformInfo(
+                frame_info_list[index].source,
+                frame_info_list[index].target,
+                canvas_width,
+                canvas_height
+            );
 
-                let tr_str = "";
-                tr_str = `${tr_str}transform:${clip_trans};transform-origin:left top;`;
-                clip_keyframs += tr_str;
+            cache.clipStyle = {
+                transform: _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy),
+                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
+                overflow: "hidden",
+                left: 0,
+                top: 0,
+                width: canvas_width,
+                height: canvas_height,
+            };
 
-                tr_str = "";
-                tr_str = `${tr_str}transform:${image_trans};transform-origin:left top;`;
-                image_keyframs += tr_str;
+            cache.transStyle = {
+                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
+                transform: _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y),
+                width: source_width,
+                height: source_height,
+            };
+
+            cache.imageStyle = {
+                backgroundImage: image_url,
+                width: source_width,
+                height: source_height,
+            };
+        },
+
+        _updateAnimateFrameCache(image_url, frame_info_list,
+                                canvas_width, canvas_height,
+                                source_width, source_height) {
+            this._clearExpiredKeyFrames();
+
+            if (!frame_info_list) { return; }
+            const anim_name_base = this._getAnimNameBase();
+            const frame_percent = 1 / (frame_info_list.length);
+            const anim_name_clip = `${anim_name_base}-clip`;
+            const anim_name_image = `${anim_name_base}-image`;
+            let image_keyframs = `@keyframes ${anim_name_image} {`;
+            let clip_keyframs = `@keyframes ${anim_name_clip} {`;
+
+            for (let i = 0; i < frame_info_list.length + 1; i++) {
+                let item;
+                if (i !== frame_info_list.length) {
+                    item = frame_info_list[i];
+                } else {
+                    // 追加一个最后一帧以保证最后一帧可见
+                    item = frame_info_list[frame_info_list.length - 1];
+                }
+
+                // Header
+                let header;
+                if (i !== frame_info_list.length) {
+                    header = `${parseFloat(frame_percent * i * 100).toFixed(2)}% {`;
+                } else {
+                    header = '100% {';
+                }
+                image_keyframs += header;
+                clip_keyframs += header;
+
+                if (item.source) {
+                    const tr = _getTransformInfo(item.source, item.target, canvas_width, canvas_height);
+                    const clip_trans = _createTransformStyle(tr.csw, tr.csh, tr.cx, tr.cy);
+                    const image_trans = _createTransformStyle(tr.sw, tr.sh, tr.x, tr.y);
+
+                    let tr_str = "";
+                    tr_str = `${tr_str}transform:${clip_trans};transform-origin:left top;`;
+                    clip_keyframs += tr_str;
+
+                    tr_str = "";
+                    tr_str = `${tr_str}transform:${image_trans};transform-origin:left top;`;
+                    image_keyframs += tr_str;
+                }
+
+                image_keyframs += '}';
+                clip_keyframs += '}';
             }
 
             image_keyframs += '}';
             clip_keyframs += '}';
-        }
 
-        image_keyframs += '}';
-        clip_keyframs += '}';
+            if (this.keyFrameStyleSheet) {
+                this.keyFrameStyleSheet.insertRule(image_keyframs);
+                this.keyFrameStyleSheet.insertRule(clip_keyframs);
 
-        if (this.keyFrameStyleSheet) {
-            this.keyFrameStyleSheet.insertRule(image_keyframs);
-            this.keyFrameStyleSheet.insertRule(clip_keyframs);
+                // 记录Keyframe设置，以便于界面关闭时进行清理
+                this.keyFrameNames.clip = anim_name_clip;
+                this.keyFrameNames.image = anim_name_image;
+                this.keyFrameNames.valid = true;
+            }
+            const cache = this.animateFrameCache;
+
+            cache.clipAnimName = `${anim_name_base}-clip`;
+            cache.imageAnimName = `${anim_name_base}-image`;
+
+            cache.clipStyle = {
+                overflow: "hidden",
+                width: canvas_width,
+                height: canvas_height,
+                transform: null, // 重置 transform，以免影响keyframe动画
+                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
+                animation: null, // 外部设置，需要时间和loop信息
+            };
 
-            // 记录Keyframe设置，以便于界面关闭时进行清理
-            this.keyFrameNames.clip = anim_name_clip;
-            this.keyFrameNames.image = anim_name_image;
-            this.keyFrameNames.valid = true;
-        }
-        const cache = this.animateFrameCache;
-
-        cache.clipAnimName = `${anim_name_base}-clip`;
-        cache.imageAnimName = `${anim_name_base}-image`;
-
-        cache.clipStyle = {
-            overflow: "hidden",
-            width: canvas_width,
-            height: canvas_height,
-            transform: null, // 重置 transform，以免影响keyframe动画
-            transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-            animation: null, // 外部设置，需要时间和loop信息
-        };
+            cache.transStyle = {
+                transform: null, // 重置 transform，以免影响keyframe动画
+                transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
+                animation: null, // 外部设置，需要时间和loop信息
+                width: source_width,
+                height: source_height,
+            };
 
-        cache.transStyle = {
-            transform: null, // 重置 transform，以免影响keyframe动画
-            transformOrigin: this.TRANSFORM_ORIGIN_LEFT_TOP,
-            animation: null, // 外部设置，需要时间和loop信息
-            width: source_width,
-            height: source_height,
-        };
+            cache.imageStyle = {
+                backgroundImage: image_url,
+                width: source_width,
+                height: source_height,
+            };
+        },
 
-        cache.imageStyle = {
-            backgroundImage: image_url,
-            width: source_width,
-            height: source_height,
-        };
-    }
+        _clearExpiredKeyFrames() {
+            if (this.keyFrameNames.valid) {
+                this._removeKeyFrame([this.keyFrameNames.clip, this.keyFrameNames.image]);
+                this.keyFrameNames.valid = false;
+            }
+        },
 
-    _clearExpiredKeyFrames() {
-        if (this.keyFrameNames.valid) {
-            this._removeKeyFrame([this.keyFrameNames.clip, this.keyFrameNames.image]);
-            this.keyFrameNames.valid = false;
-        }
-    }
+        _removeKeyFrame(names_array) {
+            if (this.keyFrameStyleSheet) {
+                this.keyFrameStyleSheet.removeMultiRules(names_array);
+            }
+        },
+
+        _IsAutoStart() {
+            let autoStart = false;
+            if (typeof this.$props.autostart === "boolean") {
+                autoStart = this.$props.autostart;
+            } if (typeof this.$props.autostart === "string" && this.$props.autostart !== "none") {
+                autoStart = true;
+            }
+            return autoStart;
+        },
+
+        _AnalyzeProp() {
+            const used = this.$props.controller && this.$props.controller.Used;
+            if (this.$props.spriteInfo.frames.length === 1 || (!used && !this._IsAutoStart()) || this.stopped) {
+                // 单图模式
+                // 解析图片信息
+                this._updateFrozeFrameCache(
+                    this.$props.imageUrl,
+                    this.$props.spriteInfo.frames,
+                    this.$props.viewSize.w,
+                    this.$props.viewSize.h,
+                    this.$props.spriteInfo.meta.size.w,
+                    this.$props.spriteInfo.meta.size.h
+                );
+
+                return {
+                    clipStyle: this.frozeFrameCache.clipStyle,
+                    transStyle: this.frozeFrameCache.transStyle,
+                    imageStyle: this.frozeFrameCache.imageStyle,
+                };
+            }
 
-    _removeKeyFrame(names_array) {
-        if (this.keyFrameStyleSheet) {
-            this.keyFrameStyleSheet.removeMultiRules(names_array);
-        }
-    }
 
-    _IsAutoStart() {
-        let autoStart = false;
-        if (typeof this.$props.autostart === "boolean") {
-            autoStart = this.$props.autostart;
-        } if (typeof this.$props.autostart === "string" && this.$props.autostart !== "none") {
-            autoStart = true;
-        }
-        return autoStart;
-    }
+            // 动画模式
+            if (this.animateFrameCache.imageStyle.backgroundImage !== this.$props.imageUrl) {
+                // 解析图片信息
+                this._updateAnimateFrameCache(
+                    this.$props.imageUrl,
+                    this.$props.spriteInfo.frames,
+                    this.$props.viewSize.w,
+                    this.$props.viewSize.h,
+                    this.$props.spriteInfo.meta.size.w,
+                    this.$props.spriteInfo.meta.size.h
+                );
+            }
 
-    _AnalyzeProp() {
-        const used = this.$props.controller && this.$props.controller.Used;
-        if (this.$props.spriteInfo.frames.length === 1 || (!used && !this._IsAutoStart()) || this.stopped) {
-            // 单图模式
-            // 解析图片信息
-            this._updateFrozeFrameCache(
-                this.$props.imageUrl,
-                this.$props.spriteInfo.frames,
-                this.$props.viewSize.w,
-                this.$props.viewSize.h,
-                this.$props.spriteInfo.meta.size.w,
-                this.$props.spriteInfo.meta.size.h
-            );
+            // 使用duration和loop信息更新动画设定
+            this.animateFrameCache.clipStyle.animation =
+            `${this.animateFrameCache.clipAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
+            this.animateFrameCache.transStyle.animation =
+            `${this.animateFrameCache.imageAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
 
             return {
-                clipStyle: this.frozeFrameCache.clipStyle,
-                transStyle: this.frozeFrameCache.transStyle,
-                imageStyle: this.frozeFrameCache.imageStyle,
+                clipStyle: this.animateFrameCache.clipStyle,
+                transStyle: this.animateFrameCache.transStyle,
+                imageStyle: this.animateFrameCache.imageStyle,
             };
-        }
-
-
-        // 动画模式
-        if (this.animateFrameCache.imageStyle.backgroundImage !== this.$props.imageUrl) {
-            // 解析图片信息
-            this._updateAnimateFrameCache(
-                this.$props.imageUrl,
-                this.$props.spriteInfo.frames,
-                this.$props.viewSize.w,
-                this.$props.viewSize.h,
-                this.$props.spriteInfo.meta.size.w,
-                this.$props.spriteInfo.meta.size.h
-            );
-        }
-
-        // 使用duration和loop信息更新动画设定
-        this.animateFrameCache.clipStyle.animation =
-        `${this.animateFrameCache.clipAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
-        this.animateFrameCache.transStyle.animation =
-        `${this.animateFrameCache.imageAnimName} ${this.spriteDuration}s steps(1,end) ${this.$props.loop}`;
-
-        return {
-            clipStyle: this.animateFrameCache.clipStyle,
-            transStyle: this.animateFrameCache.transStyle,
-            imageStyle: this.animateFrameCache.imageStyle,
-        };
-    }
+        },
+
+        // shouldComponentUpdate(next_props, next_state) {
+        //     return (
+        //         (this.$props.imageUrl !== next_props.imageUrl)
+        //         || (this.$props.onAnimEnd !== next_props.onAnimEnd)
+        //         || (this.$props.loop !== next_props.loop)
+        //         || (this.spriteDuration !== next_state.duration)
+        //         || (this.$props.autostart !== next_props.autostart)
+        //         || this.innerId !== next_state.innerId
+        //         || this.stopped !== next_state.stopped
+        //         || this.blinkAnim !== next_state.blinkAnim
+        //     );
+        // }
+
+        onAnimEndDelegate() {
+            // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
+            this.stopped = true;
+            if (this.$props.onAnimEnd) {
+                this.$props.onAnimEnd();
+            }
+        },
 
-    // shouldComponentUpdate(next_props, next_state) {
-    //     return (
-    //         (this.$props.imageUrl !== next_props.imageUrl)
-    //         || (this.$props.onAnimEnd !== next_props.onAnimEnd)
-    //         || (this.$props.loop !== next_props.loop)
-    //         || (this.spriteDuration !== next_state.duration)
-    //         || (this.$props.autostart !== next_props.autostart)
-    //         || this.innerId !== next_state.innerId
-    //         || this.stopped !== next_state.stopped
-    //         || this.blinkAnim !== next_state.blinkAnim
-    //     );
-    // }
-
-    onAnimEndDelegate() {
-        // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
-        this.stopped = true;
-        if (this.$props.onAnimEnd) {
-            this.$props.onAnimEnd();
+        onBlinkAnimEnd() {
+            // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
+            this.blinkAnim = null;
         }
     }
-
-    onBlinkAnimEnd() {
-        // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
-        this.blinkAnim = null;
-    }
-
-    unmounted() {
-        this._clearExpiredKeyFrames();
-    }
-    
 }
-export default JsvSpriteAnim;
 </script>
 
 <template>

package/utils/JsViewVueWidget/JsvSpriteAnim/index.js

@@ -1,6 +1,5 @@
-import JsvSpriteAnim from './JsvSpriteAnim.vue';
-import SpriteController from './SpriteController.js';
+import JsvSpriteAnim from "./JsvSpriteAnim.vue";
+import { SpriteController } from "./SpriteController.js";
 
 export default JsvSpriteAnim;
 export { SpriteController };
-

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -21,6 +21,7 @@
  *          onBlur          {Function}   失去焦点的回调
  *          swipeType          {String}   切换方式，目前只支持 translate，之后可能会添加 opacity 等方式
  *          smoothTranslate          {boolean}   平滑模式动画开关
+ *          reverseSwipe      {boolean} 反转滚动方向,默认值为false. 默认滚动方向是正向, 既向index增大的方向, 反转后为反向, 既向index减小的方向
  *     public methods:
  *          slideTo
  *          @description 滚动到指定id
@@ -123,6 +124,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    reverseSwipe: {
+      type: Boolean,
+      default: false,
+    }
   },
   computed: {
     indicatorLayout() {
@@ -263,7 +268,7 @@ export default {
           clearInterval(this.timeoutHandler);
         }
         this.timeoutHandler = setInterval(() => {
-          this._trigger(1);
+          this._trigger(this.reverseSwipe ? -1 : 1);
         }, this.autoplayInterval);
       }
     },