미니 프로그램에서 티몰 로또 휠 및 마키와 유사한 효과 구현

우리는 전자상거래 활동을 할 때 관심을 끌기 위해 천막을 사용하고 복권 효과를 얻기 위해 대형 턴테이블을 사용하는 경우가 많습니다.
WeChat 미니 프로그램 개발에서 이러한 효과를 어떻게 달성할 수 있나요? 자세한 내용은 아래 설명을 참조하시기 바랍니다.


구현할 기능
1. 티몰 슈퍼마켓 복권과 유사한 대형 캐러셀을 구현합니다
2. 그런 다음 마키 효과를 구현합니다
3. 추첨이 완료되면 팝업창이 뜹니다


렌더링 먼저 보세요

간단한 설명

1. 바깥쪽 원에 깜박이는 공은 js로 제어되는 스타일입니다. 스타일은 500ms마다 변경됩니다. 간단하고 투박합니다. 2. 복권 항목도 js로 제어되는 배경입니다. , 그런데 애니메이션에 timingFunction이 있는데, js를 직접 사용하면 그렇게 간단하지 않고, 시간이 선형적으로 변합니다. 먼저 기울기가 작고 기울기가 큰 함수가 더 나은 효과를 가져야 합니다.

다음은 페이지 WXML 코드입니다.

<!--index.wxml--> 
<view class="container-out">  
  <view  
  class="circle" wx:for="{{circleList}}"  
  style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>  
  <view class="container-in">  
    <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">  
      <image class="award-image" src="{{item.imageAward}}"></image>  
    </view>  
    <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?&#39;#e7930a&#39;:&#39;#ffe400&#39;}}">START</view>  
  </view>  
</view>

다음은 페이지의 WXSS 코드입니다.

/**index.wxss**/ 
   
.container-out {  
  height: 600rpx;  
  width: 650rpx;  
  background-color: #b136b9;  
  margin: 100rpx auto;  
  border-radius: 40rpx;  
  box-shadow: 0 10px 0 #871a8e;  
  position: relative;  
}  
   
.container-in {  
  width: 580rpx;  
  height: 530rpx;  
  background-color: #871a8e;  
  border-radius: 40rpx;  
  position: absolute;  
  left: 0;  
  right: 0;  
  top: 0;  
  bottom: 0;  
  margin: auto;  
}  
   
/**小圆球  
box-shadow: inset 3px 3px 3px #fff2af;*/ 
   
.circle {  
  position: absolute;  
  display: block;  
  border-radius: 50%;  
  height: 20rpx;  
  width: 20rpx;  
}  
   
.content-out {  
  position: absolute;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #f5f0fc;  
  border-radius: 15rpx;  
  box-shadow: 0 5px 0 #d87fde;  
}  
   
/**居中 加粗*/ 
   
.start-btn {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  border-radius: 15rpx;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #ffe400;  
  box-shadow: 0 5px 0 #e7930a;  
  color: #f6251e;  
  text-align: center;  
  font-size: 55rpx;  
  font-weight: bolder;  
  line-height: 150rpx;  
}  
   
.award-image {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  height: 140rpx;  
  width: 130rpx;  
}

다음은 페이지의 JS 코드입니다.

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    circleList: [],//圆点数组  
    awardList: [],//奖品数组  
    colorCircleFirst: '#FFDF2F',//圆点颜色1  
    colorCircleSecond: '#FE4D32',//圆点颜色2  
    colorAwardDefault: '#F5F0FC',//奖品默认颜色  
    colorAwardSelect: '#ffe400',//奖品选中颜色  
    indexSelect: 0,//被选中的奖品index  
    isRunning: false,//是否正在抽奖  
    imageAward: [  
      '../../images/1.jpg',  
      '../../images/2.jpg',  
      '../../images/3.jpg',  
      '../../images/4.jpg',  
      '../../images/5.jpg',  
      '../../images/6.jpg',  
      '../../images/7.jpg',  
      '../../images/8.jpg',  
    ],//奖品图片数组  
  },  
   
  onLoad: function () {

더 작게 이 프로그램은 Tmall 복권의 대형 턴테이블 및 천막과 유사한 효과를 구현합니다. 기사, PHP 중국어 웹사이트를 주목해주세요!