thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

524
components/firstui/fui-load-ani/fui-load-ani.vue Normal file
View File

@ -0,0 +1,524 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-load__ani" :class="{'fui-load__ani-fixed':isFixed}"
:style="{background:isFixed?maskColor:'transparent'}">
<!-- #ifndef APP-NVUE -->
<view class="fui-load__ani-1" v-if="type==1">
<view class="fui-load__ani-a" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
<view class="fui-ani__ani-b" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
<view :class="{'fui-load__ani-bg':!color || color==='true'}" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-2" v-if="type==2">
<view class="fui-load__ani-line fui-load__ani-c" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
<view class="fui-load__ani-line fui-load__ani-d" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
<view class="fui-load__ani-line fui-load__ani-e" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
</view>
<view class="fui-load__ani-3" :class="{'fui-load__ani-border':!color || color===true}"
:style="{'border-left-color':color,'border-right-color':color}" v-if="type==3">
</view>
<view class="fui-load__ani-4" :class="{'fui-load__ani-bcolor':!color || color===true}"
:style="{borderColor:color}" v-if="type==4">
<view class="fui-load__ani-f" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
</view>
<view class="fui-load__ani-5" :class="{'fui-load__ani-bg':!color || color===true}" :style="{background:color}"
v-if="type==5">
<view class="fui-load__ani-g" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
<view class="fui-load__ani-h" :class="{'fui-load__ani-bg':!color || color===true}"
:style="{background:color}"></view>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-load__ani-1n" v-if="type==1">
<view class="fui-loadani__1" :style="{background:color}" ref="ani_11"></view>
<view class="fui-loadani__1" :style="{background:color}" ref="ani_12"></view>
<view class="fui-loadani__1" ref="ani_13" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-2n" v-if="type==2">
<view class="fui-load__ani-line" ref="ani_11" :style="{background:color}"></view>
<view class="fui-load__ani-line" ref="ani_12" :style="{background:color}"></view>
<view class="fui-load__ani-line" ref="ani_13" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-3n" ref="fui_loadani34"
:style="{'border-left-color':color,'border-right-color':color}" v-if="type==3">
</view>
<view class="fui-load__ani-4n" ref="fui_loadani34" v-if="type==4">
<view class="fui-load__ani-41" :style="{borderColor:color}"></view>
<view class="fui-load__ani-42" :style="{background:color}"></view>
</view>
<view class="fui-load__ani-5n" v-if="type==5">
<view class="fui-load__ani-i" ref="ani_11" :style="{background:color}"></view>
<view class="fui-load__ani-i" ref="ani_12" :style="{background:color}"></view>
<view class="fui-load__ani-i" ref="ani_13" :style="{background:color}"></view>
</view>
<!-- #endif -->
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = weex.requireModule('animation')
// #endif
export default {
name: "fui-load-ani",
props: {
//loading 类型：1~5
type: {
type: [Number, String],
default: 1
},
//loading颜色
// #ifdef APP-NVUE
color: {
type: String,
default: '#465CFF'
},
// #endif
// #ifndef APP-NVUE
color: {
type: String,
default: ''
},
// #endif
//是否固定在屏幕中间显示
isFixed: {
type: Boolean,
default: false
},
//isFixed=true时有效
maskColor: {
type: String,
default: 'transparent'
}
},
// #ifdef APP-NVUE
created() {
this.timer = null;
this.deg = 0;
this.stop = false;
},
mounted() {
clearInterval(this.timer)
this.$nextTick(() => {
if (this.type == 1 || this.type == 2 || this.type == 5) {
setTimeout(() => {
this.startAni()
}, 50)
this.timer = setInterval(() => {
this.startAni()
}, 1200)
} else if (this.type == 3 || this.type == 4) {
setTimeout(() => {
this.deg += 360;
this._animation()
}, 50)
}
})
},
// #ifndef VUE3
beforeDestroy() {
clearInterval(this.timer)
this.deg = 0;
this.stop = true;
},
// #endif
// #ifdef VUE3
beforeUnmount() {
clearInterval(this.timer)
this.deg = 0;
this.stop = true;
},
// #endif
methods: {
transition(el, options, duration, delay = 0) {
return new Promise((resolve) => {
animation.transition(el.ref, {
duration,
delay,
timingFunction: 'linear',
needLayout: false,
...options,
}, resolve)
})
},
ani(el) {
let styles = {}
let styles2 = {}
if (this.type == 5) {
styles.opacity = 0.25
styles2.opacity = 1
} else {
styles.transform = this.type == 1 ? 'scale(0)' : `translateY(0)`
styles2.transform = this.type == 1 ? 'scale(1)' : `translateY(100%)`
}
this.transition(el, {
styles
}, 500, 0).then(() => {
this.transition(el, {
styles: styles2
}, 500, 0)
})
},
startAni() {
this.ani(this.$refs['ani_11'])
setTimeout(() => {
this.ani(this.$refs['ani_12'])
}, 300)
setTimeout(() => {
this.ani(this.$refs['ani_13'])
}, 500)
},
_animation() {
if (!this.$refs['fui_loadani34'] || this.stop) return;
animation.transition(
this.$refs['fui_loadani34'].ref, {
styles: {
transform: `rotate(${this.deg}deg)`
},
duration: 800, //ms
timingFunction: 'linear',
iterationCount: 'infinite',
needLayout: false,
delay: 0 //ms
}, () => {
this.deg += 360;
this._animation()
}
);
}
}
// #endif
}
</script>
<style scoped>
.fui-load__ani {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
/* #endif */
/* #ifdef APP-VUE */
flex: 1;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.fui-load__ani-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
z-index: 996;
/* #endif */
justify-content: center;
align-items: center;
}
/* #ifndef APP-NVUE */
.fui-load__ani-1{
flex-direction: row;
}
.fui-load__ani-1 view {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
display: inline-block;
animation: ani_1 1.4s infinite ease-in-out;
animation-fill-mode: both;
}
.fui-load__ani-1 .fui-load__ani-a {
animation-delay: -0.30s;
}
.fui-load__ani-1 .fui-load__ani-b {
animation-delay: -0.15s;
}
@keyframes ani_1 {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1)
}
}
.fui-load__ani-2 {
position: relative;
width: 60rpx;
height: 60rpx;
display: inline-block;
vertical-align: middle;
}
.fui-load__ani-line {
width: 8rpx;
position: absolute;
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
bottom: 0;
transform: translateZ(0);
}
.fui-load__ani-c {
animation: ani_2 0.5s ease alternate infinite;
}
.fui-load__ani-d {
left: 20rpx;
animation: ani_2 0.5s 0.2s ease alternate infinite;
}
.fui-load__ani-e {
left: 40rpx;
animation: ani_2 0.5s 0.4s ease alternate infinite;
}
@keyframes ani_2 {
0% {
height: 0;
}
100% {
height: 75%;
}
}
.fui-load__ani-3 {
width: 40rpx;
height: 40rpx;
border: 2px solid transparent;
border-radius: 50%;
animation: 0.9s ani_3 linear infinite;
}
@keyframes ani_3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.fui-load__ani-4 {
width: 52rpx;
height: 52rpx;
border: 1px solid;
border-radius: 50%;
-webkit-animation: 1s ani_3 linear infinite;
animation: .9s ani_3 linear infinite;
position: relative;
}
.fui-load__ani-f {
width: 16rpx;
height: 16rpx;
position: absolute;
top: -8rpx;
left: 50%;
border-radius: 50%;
opacity: .6;
}
.fui-load__ani-5 {
position: relative;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
animation: ani_4 1s infinite linear;
}
.fui-load__ani-g,
.fui-load__ani-h {
display: inline-block;
position: absolute;
top: 0;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
opacity: 0.25;
}
.fui-load__ani-g {
left: -30rpx;
animation: ani_4_2 1s infinite linear;
}
.fui-load__ani-h {
left: 30rpx;
animation: ani_4_1 1s infinite linear;
}
@-webkit-keyframes ani_4 {
0% {
opacity: 1;
}
33% {
opacity: 0.25;
}
66% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
@keyframes ani_4_1 {
0% {
opacity: 0.25;
}
33% {
opacity: 1;
}
66% {
opacity: 0.25;
}
}
@keyframes ani_4_2 {
33% {
opacity: 0.25;
}
66% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.fui-load__ani-bcolor {
border-color: var(--fui-color-primary, #465CFF) !important;
}
.fui-load__ani-border {
border-left-color: var(--fui-color-primary, #465CFF) !important;
border-right-color: var(--fui-color-primary, #465CFF) !important;
}
.fui-load__ani-bg {
background: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
/* #ifdef APP-NVUE */
.fui-load__ani-1n {
flex-direction: row;
align-items: center;
}
.fui-loadani__1 {
width: 36rpx;
height: 36rpx;
border-radius: 36rpx;
}
.fui-load__ani-2n {
position: relative;
width: 56rpx;
height: 56rpx;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
overflow: hidden;
}
.fui-load__ani-line {
width: 8rpx;
height: 56rpx;
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
transform: translateY(100%);
}
.fui-load__ani-3n {
width: 40rpx;
height: 40rpx;
border: 2px solid transparent;
border-radius: 24rpx;
}
.fui-load__ani-4n {
width: 68rpx;
height: 68rpx;
position: relative;
align-items: center;
justify-content: center;
border: 0;
}
.fui-load__ani-41 {
width: 52rpx;
height: 52rpx;
border: 1px solid;
border-radius: 50%;
}
.fui-load__ani-42 {
width: 16rpx;
height: 16rpx;
position: absolute;
top: 0rpx;
left: 26rpx;
border-radius: 12rpx;
opacity: .6;
}
.fui-load__ani-5n {
width: 76rpx;
height: 18rpx;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.fui-load__ani-i {
width: 16rpx;
height: 16rpx;
border-radius: 12rpx;
opacity: .25;
}
/* #endif */
</style>