stellar-ui-v2 1.35.3

package/common/css/common.scss

@@ -0,0 +1,61 @@
+image {
+	width: 100%;
+	height: 100%;
+	line-height: 0;
+	margin: 0;
+	padding: 0;
+	display: block;
+	vertical-align: middle;
+}
+
+movable-area,
+movable-view,
+page-container,
+scroll-view,
+share-element,
+swiper,
+swiper-item,
+view icon,
+progress,
+rich-text,
+text,
+button,
+checkbox,
+checkbox-group,
+editor,
+form,
+input,
+keyboard-accessory,
+label,
+picker,
+picker-view,
+picker-view-column,
+radio,
+radio-group,
+slider,
+switch,
+textarea,
+functional-page-navigator,
+navigator,
+audio,
+camera,
+image,
+live-player,
+live-pusher,
+videovoip-room,
+map,
+canvas,
+ad,
+ad-custom,
+official-account,
+open-data,
+view {
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+// #ifdef H5
+.disabled {
+	cursor: no-drop !important;
+}
+// #endif

package/components/ste-animate/README.md

@@ -0,0 +1,117 @@
+# Animate 动画
+
+给子元素添加动画效果
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<ste-animate type="shakeX" loop>
+	<ste-button>shakeX-横向</ste-button>
+</ste-animate>
+<ste-animate type="shakeY" loop>
+	<ste-button>shakeY-竖向</ste-button>
+</ste-animate>
+<ste-animate type="ripple" loop>
+	<ste-button>ripple-心跳</ste-button>
+</ste-animate>
+<ste-animate type="breath" loop>
+	<ste-button>breath-呼吸灯</ste-button>
+</ste-animate>
+<ste-animate type="twinkle" loop>
+	<ste-button>twinkle-水波</ste-button>
+</ste-animate>
+<ste-animate type="flicker" loop>
+	<ste-button>flicker-擦亮</ste-button>
+</ste-animate>
+<ste-animate type="jump" loop>
+	<ste-button>jump-跳跃</ste-button>
+</ste-animate>
+<ste-animate type="float" loop>
+	<ste-button>float-漂浮</ste-button>
+</ste-animate>
+```
+
+#### 点击触发
+设置`action`为`click`
+
+```html
+<ste-animate type="slide-right" action="click">
+	<ste-button :stopPropagation="false">由右向左划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-left" action="click">
+	<ste-button :stopPropagation="false">由左向右划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-top" action="click">
+	<ste-button :stopPropagation="false">由上向下划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-bottom" action="click">
+	<ste-button :stopPropagation="false">由下向上划入</ste-button>
+</ste-animate>
+```
+
+#### 属性触发
+可通过属性`show`来自定义触发动画执行
+```html
+<view>
+	<ste-animate type="shakeY" :show="show">
+		<ste-button :stopPropagation="false">动画</ste-button>
+	</ste-animate>
+</view>
+<view>
+	<ste-button @click="click">触发</ste-button>
+</view>
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+		}
+	},
+	methods: {
+		click() {
+			this.show = false;
+			setTimeout(() => {
+				this.show = true;
+			}, 50);
+		},
+	},
+}
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数		| 说明																| 类型		| 默认值		| 可选值	| 支持版本	|
+| ---		| ---																| ---		| ---		| ---	| ---		|
+| `show`	| 控制动画，当值从`false`变为`true`时会触发一次动画					| `Boolean`	| `false`	| -		| -			|
+| `type`	| 动画类型，见下方`type`值说明										| `String`	| -			| -		| -			|
+| `loop`	| 是否循环执行。														| `Boolean`	| `false`	| -		| -			|
+| `duration`| 动画时长，单位 ms													| `Number`	|			| -		| -			|
+| `action`	| 不能与 show 同时使用）触发方式，`initial`初始化执行; `click`点击执行	| `String`	| -			| -		| -			|
+
+#### 动画类型(type)
+| 参数名称		|参数说明							|
+| ---			|---								|
+| `shake`		| 抖动，建议 loop 为 true			|
+| `ripple`		| 不循环则是放大后缩小，循环则是心跳	|
+| `breath`		| 呼吸灯，建议 loop 为 true			|
+| `float`		| 漂浮，建议 loop 为 true			|
+| `slide-right`	| 由右向左划入						|
+| `slide-left`	| 由左向右划入						|
+| `slide-top`	| 由上至下划入						|
+| `slide-bottom`| 由下至上划入						|
+| `jump`		| 跳跃，建议 loop 为 true			|
+| `twinkle`		| 水波，建议 loop 为 true			|
+| `flicker`		| 擦亮按钮，建议 loop 为 true		|
+
+#### 组件插槽(Slots)
+| 名称		| 说明		| 支持版本	|
+| ---		| ---		| ---		|
+| `default`	| 默认插槽	| -			|
+
+---$
+{{fuyuwei}}

package/components/ste-animate/animate.scss

@@ -0,0 +1,247 @@
+// 横向抖动动画
+@keyframes shakeX {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+
+	10% {
+		transform: translateX(-9px);
+	}
+
+	20% {
+		transform: translateX(8px);
+	}
+
+	30% {
+		transform: translateX(-7px);
+	}
+
+	40% {
+		transform: translateX(6px);
+	}
+
+	50% {
+		transform: translateX(-5px);
+	}
+
+	60% {
+		transform: translateX(4px);
+	}
+
+	70% {
+		transform: translateX(-3px);
+	}
+
+	80% {
+		transform: translateX(2px);
+	}
+
+	90% {
+		transform: translateX(-1px);
+	}
+}
+
+// 竖向抖动动画
+@keyframes shakeY {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+
+	10% {
+		transform: translateY(-9px);
+	}
+
+	20% {
+		transform: translateY(8px);
+	}
+
+	30% {
+		transform: translateY(-7px);
+	}
+
+	40% {
+		transform: translateY(6px);
+	}
+
+	50% {
+		transform: translateY(-5px);
+	}
+
+	60% {
+		transform: translateY(4px);
+	}
+
+	70% {
+		transform: translateY(-3px);
+	}
+
+	80% {
+		transform: translateY(2px);
+	}
+
+	90% {
+		transform: translateY(-1px);
+	}
+}
+
+// 心跳
+@keyframes ripple {
+	0% {
+		// box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
+
+		transform: scale(1);
+	}
+
+	50% {
+		// box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
+		transform: scale(1.1);
+	}
+}
+
+// 呼吸
+@keyframes breath {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+// 右侧向左侧划入
+@keyframes slide-right {
+	0% {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+// 左侧向右侧划入
+@keyframes slide-left {
+	0% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+// 上面向下面划入
+@keyframes slide-top {
+	0% {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+// 下面向上面划入
+@keyframes slide-bottom {
+	0% {
+		opacity: 0;
+		transform: translateY(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+// 漂浮 float
+@keyframes floatPop {
+	0% {
+		top: 0;
+	}
+
+	25% {
+		top: 1px;
+	}
+
+	50% {
+		top: 4px;
+	}
+
+	75% {
+		top: 1px;
+	}
+
+	100% {
+		top: 0;
+	}
+}
+
+// 跳跃
+@keyframes jump {
+	0% {
+		transform: rotate(0deg) translateY(0);
+		animation-timing-function: ease-in;
+	}
+
+	25% {
+		transform: rotate(10deg) translateY(20 * 1px);
+		animation-timing-function: ease-out;
+	}
+
+	50% {
+		transform: rotate(0deg) translateY(-10 * 1px);
+		animation-timing-function: ease-in;
+	}
+
+	75% {
+		transform: rotate(-10deg) translateY(20 * 1px);
+		animation-timing-function: ease-out;
+	}
+
+	100% {
+		transform: rotate(0deg) translateY(0);
+		animation-timing-function: ease-in;
+	}
+}
+
+// 水波
+@keyframes twinkle {
+	0% {
+		transform: scale(0);
+	}
+
+	20% {
+		opacity: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 0;
+		transform: scale(1.4);
+	}
+}
+
+@keyframes flicker {
+	0% {
+		transform: translateX(-100 * 1px) skewX(-20deg);
+	}
+
+	40%,
+	100% {
+		transform: translateX(150 * 1px) skewX(-20deg);
+	}
+}

package/components/ste-animate/ste-animate.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="ste-animate-root ste-animate" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	group: '展示组件',
+	title: 'Animate 动画',
+	name: 'ste-animate',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		show: {
+			type: [Boolean, null],
+			default: false,
+		},
+		type: {
+			type: [String, null],
+			default: '',
+		},
+		loop: {
+			type: [Boolean, null],
+			default: false,
+		},
+		duration: {
+			type: [Number, null],
+			default: 300,
+		},
+		action: {
+			type: [String, null],
+			default: '',
+		},
+	},
+	data() {
+		return {
+			animationFlag: false, // 通过此标识控制动画执行
+		};
+	},
+	computed: {
+		cmpRootClass() {
+			let classArr = [];
+			if (this.type && (this.action === 'initial' || this.animationFlag || this.loop)) {
+				classArr.push(`ste-animate-${this.type}`);
+			}
+			if (this.loop) {
+				classArr.push('loop');
+			}
+			return classArr.join(' ');
+		},
+		cmpRootStyle() {
+			let style = {};
+			if (this.duration) {
+				style.animationDuration = this.duration;
+			}
+			return style;
+		},
+	},
+	watch: {
+		show: {
+			handler(val) {
+				if (val) {
+					this.animated();
+				}
+			},
+		},
+	},
+	methods: {
+		handleClick() {
+			if (this.action === 'click') {
+				this.animated();
+			}
+		},
+		animated() {
+			this.animationFlag = false;
+			setTimeout(() => {
+				this.animationFlag = true;
+			}, 10);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './animate.scss'; // 所有动画
+.ste-animate-root {
+	display: inline-block;
+
+	&.ste-animate {
+		animation-duration: 0.5s;
+		animation-timing-function: ease-out;
+		animation-fill-mode: both;
+	}
+
+	// 循环
+	&.loop {
+		animation-iteration-count: infinite !important;
+	}
+
+	// 横向抖动
+	&.ste-animate-shakeX {
+		animation-name: shakeX;
+	}
+
+	// 竖向抖动
+	&.ste-animate-shakeY {
+		animation-name: shakeY;
+	}
+
+	// 心跳
+	&.ste-animate-ripple {
+		animation-name: ripple;
+	}
+
+	// 漂浮
+	&.ste-animate-float {
+		position: relative;
+		animation-name: floatPop;
+	}
+
+	// 呼吸灯
+	&.ste-animate-breath {
+		animation-name: breath;
+		animation-duration: 2700ms;
+		animation-timing-function: ease-in-out;
+		animation-direction: alternate;
+	}
+
+	// 右侧向左侧划入
+	&.ste-animate-slide-right {
+		animation-name: slide-right;
+	}
+
+	// 右侧向左侧划入
+	&.ste-animate-slide-left {
+		animation-name: slide-left;
+	}
+
+	// 上面向下面划入
+	&.ste-animate-slide-top {
+		animation-name: slide-top;
+	}
+
+	// 下面向上面划入
+	&.ste-animate-slide-bottom {
+		animation-name: slide-bottom;
+	}
+
+	&.ste-animate-jump {
+		transform-origin: center center;
+		animation: jump 0.7s linear;
+	}
+
+	&.ste-animate-twinkle {
+		position: relative;
+
+		&::after,
+		&::before {
+			position: absolute;
+			right: 50%;
+			z-index: 1;
+			box-sizing: border-box;
+			width: 60px;
+			height: 60px;
+			margin-top: -15px;
+			margin-right: -30px;
+			content: '';
+			border: 4rpx solid rgba(255, 255, 255, 0.6);
+			border-radius: 30px;
+			transform: scale(0);
+			animation: twinkle 2s ease-out infinite;
+		}
+
+		&::after {
+			animation-delay: 0.4s;
+		}
+	}
+
+	&.ste-animate-flicker {
+		position: relative;
+		overflow: hidden;
+
+		&::after {
+			position: absolute;
+			top: -2rpx;
+			left: 0;
+			width: 200rpx;
+			height: 102%;
+			content: '';
+			background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
+			filter: blur(6rpx);
+			opacity: 0.73;
+			transform: skew(-20deg);
+			animation: flicker 1.5s linear infinite;
+		}
+	}
+}
+</style>