123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- <template>
- <view class="text-container">
- <!-- #ifdef APP-NVUE -->
- <text ref="text" class="loading-text" :class="animationClass" v-for="(item, index) in texts" :key="index" :style="{'font-size': fontSize + 'rpx'}">{{item}}</text>
- <!-- #endif -->
- <!-- #ifdef APP-VUE || H5 -->
- <text ref="text" class="loading-text" :class="animationClass" v-for="(item, index) in texts" :key="index" :style="{'animation-delay': 102.631578 * (index + 1) + 'ms', 'font-size': fontSize + 'rpx'}" v-html="item"></text>
- <!-- #endif -->
- <!-- #ifdef MP-WEIXIN -->
- <block v-for="(item, index) in texts" :key="index">
- <text v-if="item == ' '" :style="{width: spaceSize + 'rpx'}"></text>
- <text ref="text" class="loading-text" :class="animationClass" :style="{'animation-delay': 102.631578 * (index + 1) + 'ms', 'font-size': fontSize + 'rpx'}" v-else>{{item}}</text>
- </block>
- <!-- #endif -->
- </view>
- </template>
- <script>
- // ls-loading组件内置动画效果组件: 组合类型动画组件
- // #ifdef APP-NVUE
- const animation = weex.requireModule('animation');
- // #endif
- let sit;
- export default {
- name: 'comb-loader',
- props: {
- // 加载中的文字
- text: {
- type: String,
- default: '正在加载'
- },
- // 加载中文字大小
- fontSize: {
- type: [String, Number],
- default: 58
- },
- // 动画类型 twinkle文字闪烁 focus文字聚焦
- animationType: {
- type: String,
- default: "twinkle"
- }
- },
- computed: {
- texts() {
- // #ifdef APP-NVUE
- return this.text.split('');
- // #endif
-
- // #ifndef APP-NVUE
- return this.text.split('').map(item => {
- return item.replace(/\s/g, ' ');
- });
- // #endif
- },
- spaceSize() {
- return this.fontSize / 2;
- },
- animationClass() {
- if (this.animationType == 'twinkle') {
- return 'text-animation-twinkle'
- }
- if (this.animationType == 'focus') {
- return 'text-animation-focus'
- }
- }
- },
- mounted() {
- setTimeout(() => {
- // #ifdef APP-NVUE
- switch (this.animationType) {
- case 'twinkle':
- this.createAnimation1();
- break;
- case 'focus':
- this.createAnimation2();
- break;
- default:
- this.createAnimation1();
- }
- // #endif
- }, 40);
- },
- destroyed() {
- clearInterval(sit);
- },
- methods: {
- // 动画1 twinkle 文字依次闪烁
- createAnimation1() {
- const refs = this.$refs.text;
- const gap = 1200 / this.texts.length;
- const duration = 66 * this.texts.length;
- let flag = true;
- let style;
- // 定时器执行前,先执行一次,让整个过程更流畅
- setTimeout(() => {
- for (let i = 0, length = refs.length; i < length; i++) {
- this.executeAnimation(refs[i], gap * (i + 1), {opacity: 1});
- }
- }, 100);
- clearInterval(sit);
- sit = setInterval(() => {
- style = flag ? {opacity: 1} : {opacity: 0.3};
- for (let i = 0, length = refs.length; i < length; i++) {
- this.executeAnimation(refs[i], gap * (i + 1), style);
- }
- flag = !flag;
- }, duration);
- },
- // 动画2 focus 文字依次放大
- createAnimation2() {
- const refs = this.$refs.text;
- const gap = 2300 / refs.length;
- const duration = 80 * refs.length;
- let flag = true;
- let style;
- // 定时器执行前,先执行一次,让整个过程更流畅
- setTimeout(() => {
- for (let i = 0, length = refs.length; i < length; i++) {
- this.executeAnimation(refs[i], gap * (i + 1), {transform: 'scale(1.3)'});
- }
- }, 100);
- clearInterval(sit);
- sit = setInterval(() => {
- style = flag ? {transform: 'scale(1.3)'} : {transform: 'scale(1)'};
- for (let i = 0, length = refs.length; i < length; i++) {
- this.executeAnimation(refs[i], gap * (i + 1), style);
- }
- flag = !flag;
- }, duration);
- },
- // 执行动画
- executeAnimation(ref, delay, styles) {
- animation.transition(ref, {
- styles,
- duration: 600, //ms
- timingFunction: 'ease-in-out',
- needLayout: false,
- delay: delay //ms
- });
- }
- }
- }
- </script>
- <style>
- .loading-text {
- font-weight: 700;
- /* #ifdef APP-NVUE */
- /* color: #c2c1c2; */
- opacity: 0.3;
- /* #endif */
- /* #ifndef APP-NVUE */
- opacity: 1;
- color: #e8e7e8;
- animation-iteration-count: infinite;
- /* #endif */
- }
-
- .text-animation-twinkle {
- /* #ifndef APP-NVUE */
- animation-timing-function: ease-in-out;
- animation-duration: 2.6s;
- animation-name: twinkle;
- /* #endif */
- }
-
- .text-animation-focus {
- margin-left: 2rpx;
- margin-right: 2rpx;
- /* #ifndef APP-NVUE */
- animation-timing-function: linear;
- animation-duration: 1.6s;
- animation-name: focus;
- /* #endif */
- }
-
- /* #ifndef APP-NVUE */
- @keyframes twinkle {
- 0% {
- /* color: #c3c3c3; */
- color: #F0AD4E;
- }
-
- 100%{
- color: #FFFFFF;
- }
- 20% {
- /* color: #e8e7e8; */
- color: #007AFF;
- }
- }
-
- @keyframes focus {
- 0%,100% {
- transform: scale(1);
- }
- 20% {
- transform: scale(1.3);
- }
- }
- /* #endif */
- </style>
|