123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- <template>
- <view class="hx-jump-ball">
- <view class="ballBox" :animation="ballBoxAnimationData" :style="{'z-index':index}">
- <view class="ballOuter"
- :animation="ballOuterAnimationData"
- :style="{width:ballWidth*2 + 'upx',height:ballHeight*2 + 'upx','background-color':backgroundColor,'background-image': backgroundImage ?`url(${backgroundImage})`: ''}">
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "hx-jump-ball",
- data() {
- return {
- flag: false,
- ballBoxAnimation: null,
- ballOuterAnimation: null,
- ballBoxAnimationData: {},
- ballOuterAnimationData: {},
- };
- },
- props: {
-
- ballWidth: {
- type: Number,
- default: 15
- },
-
- ballHeight: {
- type: Number,
- default: 15
- },
-
- backgroundColor: {
- type: String,
- default: "reg"
- },
-
- backgroundImage: {
- type: String,
- default: ""
- },
-
- index: {
- type: Number,
- default: 0
- },
-
- start: {
- type: Number,
- default: 1
- },
-
- element:{
- type: Array,
- default(){
- return []
- }
- },
-
- speed:{
- type: Number,
- default: 800
- },
-
- bezier:{
- type: String,
- default: "cubic-bezier(.6,-0.63,.94,.71)"
- }
- },
-
- watch:{
- start(val,oldVal) {
- var that = this;
- if(!that.element){
- return;
- }
- if(this.flag){
- return;
- }
- that.flag = !that.flag;
- that.getElementCoordinate(that.element[0],that.element[1]);
-
- }
- },
- created() {
- this.ballBoxAnimation = uni.createAnimation({
- duration: 0,
- timingFunction: this.bezier,
- delay: 0
- });
- this.ballOuterAnimation = uni.createAnimation({
- duration: 0,
- timingFunction: "linear",
- delay: 0
- });
- this.setEnd();
-
- },
- methods:{
-
- getElementCoordinate(startElement,endElement){
- let that = this;
- const query = uni.createSelectorQuery();
- let nodesRef = query.select(startElement);
- nodesRef.fields({
- id: true,
- rect: true,
- size: true
- }, res => {
- if(!res){
- that.flag = !that.flag;
- that.$emit("msg",{code: 100, error: '未获取到起始元素位置'})
- return ;
- }
- const SLeft = res.left + ((res.width + that.ballWidth ) / 2 - that.ballWidth);
- const STop = res.bottom - ((res.height - that.ballHeight ) / 2 + that.ballHeight);
-
- let nodesRef2 = uni.createSelectorQuery().select(endElement);
- nodesRef2.fields({
- id: true,
- rect: true,
- size: true
- }, res2 => {
- if(!res2){
- that.$emit("msg",{code: 101, error: '未获取到结束元素位置'})
- return ;
- }
-
- let ELeft = res2.left + ((res2.width + that.ballWidth ) / 2 - that.ballWidth);
- let ETop = res2.bottom - ((res2.height - that.ballHeight ) / 2 + that.ballHeight);
- that.startAnimation(SLeft,STop,ELeft,ETop);
- }).exec()
-
- }).exec()
- },
-
-
-
- startAnimation(SLeft,STop,ELeft,ETop){
- let that = this;
-
- let jumpDistance = SLeft - ELeft;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- that.ballBoxAnimation = uni.createAnimation({
- duration: 0,
- timingFunction: that.bezier,
- delay: 0
- });
- that.ballOuterAnimation = uni.createAnimation({
- duration: 0,
- timingFunction: "linear",
- delay: 0
- });
-
- that.ballBoxAnimation.translate3d(ELeft,STop,0).opacity(1).step({duration: 0});
- that.ballBoxAnimation.opacity(1).translate3d(ELeft,ETop,0).step({duration: that.speed});
- that.ballBoxAnimation.opacity(0).step({duration: 0});
- that.ballBoxAnimationData = that.ballBoxAnimation.export();
-
-
- that.ballOuterAnimation.translate3d(SLeft - ELeft,0,0).opacity(1).step({duration: 0});
- that.ballOuterAnimation.opacity(1).translate3d(0,0,0).step({duration: that.speed});
- that.ballOuterAnimation.opacity(0).step({duration: 0});
- that.ballOuterAnimationData = that.ballOuterAnimation.export();
-
- setTimeout(function() {
- that.flag = !that.flag;
- that.$emit("msg",{code:0,status:true});
- }, that.speed);
-
-
- },
-
- setStart(SLeft,STop,ELeft,ETop){
- this.ballBoxAnimation.translate3d(ELeft,STop,0).opacity(1).step({duration: 0});
- this.ballBoxAnimationData = this.ballBoxAnimation.export();
-
- this.ballOuterAnimation.translate3d(SLeft - ELeft,0,0).opacity(1).step({duration: 0});
- this.ballOuterAnimationData = this.ballOuterAnimation.export();
- },
-
-
- setEnd(){
- this.ballBoxAnimation.opacity(0).step({duration: 0});
- this.ballBoxAnimationData = this.ballBoxAnimation.export();
-
- this.ballOuterAnimation.opacity(0).step({duration: 0});
- this.ballOuterAnimationData = this.ballOuterAnimation.export();
- }
- }
- }
- </script>
- <style>
- .ballBox{
- position: fixed;
- left: 0;
- top: 0;
- z-index: 9;
-
- ;
- height:30rpx;
- width:30rpx;
- }
- .ballOuter {
- background:red;
- height:100%;
- width:100%;
- border-radius: 50%;
- background-size: 100% 100%;
- background-position: center;
- }
-
- </style>
|