molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-07 00:04:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增记载动画,新增颜色选择组件

Browse Source
This commit is contained in:
kert
2023-09-23 01:33:10 +08:00
parent 1d36ea303f
commit 0c6e535554
9 changed files with 877 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
basicPage/icon/iconfont.js
View File

File diff suppressed because one or more lines are too long

40
mock/template_page.js
View File

@@ -184,15 +184,45 @@ export default {
]
},
{
title: '动效元素',
title: '加载动画',
backgroundColor: 'tn-cool-bg-color-1',
list: [
{
icon: 'send',
title: '加载动画',
title: '加载动画1',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading'
},
{
icon: 'send',
title: '加载动画2',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading2'
},
{
icon: 'send',
title: '加载动画3',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading3'
},
{
icon: 'send',
title: '加载动画4',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading4'
},
{
icon: 'send',
title: '加载动画5',
author: '图鸟北北',
url: '/templatePage/animate/loading/loading5'
}
]
},
{
title: '动效元素',
backgroundColor: 'tn-cool-bg-color-1',
list: [
{
icon: 'send',
title: '流星悬浮',
@@ -259,12 +289,6 @@ export default {
author: '最帅的你',
url: '/templatePage/life/cube/cube'
},
{
icon: 'rocket',
title: '图鸟图表(待开源，免费开源)',
author: '图鸟北北 & Ucharts秋云',
url: '/templatePage/life/candle/candle'
},
{
icon: 'rocket',
title: '图鸟生态，期待你的加入',

6
mock/vip_page.js
View File

@@ -265,6 +265,12 @@ export default {
author: '图鸟科技',
url: '/vipPage/components/table/index'
},
{
icon: 'order',
title: '取色器',
author: '图鸟科技',
url: '/vipPage/life/color/color'
},
{
icon: 'order',
title: '图鸟轮播(实验)',

31
pages.json
View File

@@ -569,6 +569,30 @@
"navigationBarTitleText": "加载动画",
"enablePullDownRefresh": false
}
},{
"path": "animate/loading/loading2",
"style": {
"navigationBarTitleText": "加载动画",
"enablePullDownRefresh": false
}
},{
"path": "animate/loading/loading3",
"style": {
"navigationBarTitleText": "加载动画",
"enablePullDownRefresh": false
}
},{
"path": "animate/loading/loading4",
"style": {
"navigationBarTitleText": "加载动画",
"enablePullDownRefresh": false
}
},{
"path": "animate/loading/loading5",
"style": {
"navigationBarTitleText": "加载动画",
"enablePullDownRefresh": false
}
}, {
"path": "animate/particle/particle",
"style": {
@@ -974,6 +998,13 @@
"navigationBarTitleText": "uCharts首页",
"enablePullDownRefresh": false
}
},
{
"path": "life/color/color",
"style": {
"navigationBarTitleText": "取色器",
"enablePullDownRefresh": false
}
}
]

4
templatePage/animate/loading/loading.vue
View File

@@ -70,7 +70,7 @@
content: "";
inline-size: var(--size);
block-size: var(--size);
background-image: url("https://tnuiimage.tnkjapp.com/animate/animate1.jpg");
background-image: url("https://resource.tuniaokj.com/images/animate/animate1.jpg");
background-size: var(--bg-size);
background-repeat: repeat;
transform: rotate(45deg);
@@ -90,8 +90,6 @@
}
}
/* 加载部分 */
.components-anloading {
margin: 0;

61
templatePage/animate/loading/loading2.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<view class="template-content">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="load">
<text></text>
<text></text>
<text></text>
<text></text>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateContent',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 加载 */
.load{position:absolute;top:50%;left:42%;transform:translate(-50%, -50%);
width:60px;
height:60px;
}
.load text{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:#4B98FE;animation-delay:-1.5s}
.load :nth-child(2){background:#00D05E;animation-delay:-1s}
.load :nth-child(3){background:#FFAC00;animation-delay:-0.5s}
.load :last-child{background:#FB6A67}
@keyframes spin{
0%,100%{transform:translate(0)}
25%{transform:translate(160%)}
50%{transform:translate(160%, 160%)}
75%{transform:translate(0, 160%)}
}
</style>

153
templatePage/animate/loading/loading3.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="loader-wrapper">
<view class="loader">
<view class="logo-loading tn-icon-logo-tuniao tn-text-shadow-aquablue">
</view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
@-webkit-keyframes img {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes img {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin-reverse {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@keyframes spin-reverse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.loader-wrapper {
// background-color: #00C3FF;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
overflow: hidden;
}
.loader {
display: flex;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #4B98FE;
animation: spin 1.7s linear infinite;
z-index: 11;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFAC00;
animation: spin-reverse 5.6s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #00D05E;
animation: spin 2.3s linear infinite;
}
.logo-loading {
font-size: 120rpx;
color: #01BEFF;
margin: auto;
align-items: center;
display: table-cell;
vertical-align: middle;
text-align: center;
animation: img 1.7s linear infinite;
}
</style>

102
templatePage/animate/loading/loading4.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<view class="template-content">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="tn-margin tn-text-center" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="">
<view class="loading loading1 tn-icon-airplane tn-text-shadow-purplered"></view>
<view class="loading loading2 tn-icon-flower tn-text-shadow-blue"></view>
<view class="loading loading3 tn-icon-gift tn-text-shadow-orangered"></view>
<view class="loading loading4 tn-icon-shop tn-text-shadow-indigo"></view>
<view class="loading loading5 tn-icon-light tn-text-shadow-orangeyellow"></view>
<view class="loading loading6 tn-icon-fire tn-text-shadow-cyan"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateContent',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
.loading {
font-size: 60rpx;
width: 160rpx;
height: 160rpx;
animation: move 3s linear infinite;
backface-visibility: hidden;
position: absolute;
top: calc(50% - 160rpx);
left: 50%;
transform-origin: -4vmin center;
will-change: transform;
}
.loading1 {
color: #4B98FE;
animation-delay: -0.5s;
opacity: 0;
}
.loading2 {
color: #00D05E;
animation-delay: -1s;
opacity: 0;
}
.loading3 {
color: #FFAC00;
animation-delay: -1.5s;
opacity: 0;
}
.loading4 {
color: #FB6A67;
animation-delay: -2s;
opacity: 0;
}
.loading5 {
color: #957BFE;
animation-delay: -2.5s;
opacity: 0;
}
.loading6 {
color: #00B9FE;
animation-delay: -3s;
opacity: 0;
}
@keyframes move {
0% {
transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
will-change: transform;
}
30% {
opacity: 1;
}
100% {
z-index: 10;
transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
will-change: transform;
}
}
</style>

224
templatePage/animate/loading/loading5.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<view class="template-loading">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed alpha customBack>
<view slot="back" class='tn-custom-nav-bar__back'
@click="goBack">
<text class='icon tn-icon-left'></text>
<text class='icon tn-icon-home-capsule-fill'></text>
</view>
</tn-nav-bar>
<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<!-- 图鸟加载-->
<view class="loader">
<view class="circle loading1"></view>
<view class="circle loading2"></view>
<view class="circle loading3"></view>
<view class="circle loading4"></view>
<view class="circle loading5"></view>
<view class="circle loading6"></view>
<view class="circle loading7"></view>
<view class="circle loading8"></view>
</view>
</view>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
name: 'TemplateLoading',
mixins: [template_page_mixin],
data(){
return {}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import '@/static/css/templatePage/custom_nav_bar.scss';
/* 加载动画*/
.loader {
position:absolute;
width:120rpx;
height:120rpx;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.circle{
color: #01BEFF;
position: absolute;
border-radius: 100%;
width: 30rpx;
height: 30rpx;
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
-webkit-animation: spin 1s infinite ease-in-out;
-moz-animation: spin 1s infinite ease-in-out;
-o-animation: spin 1s infinite ease-in-out;
animation: spin 1s infinite ease-in-out
}
.loader :nth-child(1) {
top: 5%;
left: 50%;
-webkit-animation-delay: -.875s;
-moz-animation-delay: -.875s;
-o-animation-delay: -.875s;
animation-delay: -.875s
}
.loader :nth-child(2) {
top: 18.1801948466%;
left: 81.8198051534%;
-webkit-animation-delay: -.75s;
-moz-animation-delay: -.75s;
-o-animation-delay: -.75s;
animation-delay: -.75s
}
.loader :nth-child(3) {
top: 50%;
left: 95%;
-webkit-animation-delay: -.625s;
-moz-animation-delay: -.625s;
-o-animation-delay: -.625s;
animation-delay: -.625s
}
.loader :nth-child(4) {
top: 81.8198051534%;
left: 81.8198051534%;
-webkit-animation-delay: -.5s;
-moz-animation-delay: -.5s;
-o-animation-delay: -.5s;
animation-delay: -.5s
}
.loader :nth-child(5) {
top: 94.9999999966%;
left: 50.0000000005%;
-webkit-animation-delay: -.375s;
-moz-animation-delay: -.375s;
-o-animation-delay: -.375s;
animation-delay: -.375s
}
.loader :nth-child(6) {
top: 81.8198046966%;
left: 18.1801949248%;
-webkit-animation-delay: -.25s;
-moz-animation-delay: -.25s;
-o-animation-delay: -.25s;
animation-delay: -.25s
}
.loader :nth-child(7) {
top: 49.9999750815%;
left: 5.0000051215%;
-webkit-animation-delay: -.125s;
-moz-animation-delay: -.125s;
-o-animation-delay: -.125s;
animation-delay: -.125s
}
.loader :nth-child(8) {
top: 18.179464974%;
left: 18.1803700518%;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s
}
@-webkit-keyframes spin {
0%,
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
}
@-moz-keyframes spin {
0%,
100% {
opacity: 1;
-moz-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-moz-transform: scale(0);
transform: scale(0)
}
}
@-o-keyframes spin {
0%,
100% {
opacity: 1;
-o-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-o-transform: scale(0);
transform: scale(0)
}
}
@keyframes spin {
0%,
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
20% {
opacity: 1
}
80% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)
}
}
</style>