AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】

2022-11-24 267
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】

一、应用介绍

这次要分享的小程序功能为好友匹配动画界面，这是一款以交友相亲为背景的恋爱主题样式组件。

纯css样式和JS原生语法打造，支持多端的开发，小程序、H5、APP均能丝滑享受。


二、效果展示

image.gif


三、技术与难点

3.1 基本开发环境

  • 开发框架：uniapp
  • 代码语法：vue 2、html、css3


3.2 开发要点

  • （1）头像图片的生成
  • 先引入<image>标签，配置好相应的图片路径
   <image class="dot" src="randomImg"  style="width: 92px;height: 92px;border-radius: 50px;"></image>`
  -   再通过CSS样式将其变成圆形
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;


  • （2）CSS动画的引入对于网页元素的动画效果我们使用CSS 3 动画,不太熟悉的小伙伴可以直接查看文档进行学习：CSS动画教程
  • 先声明一个放缩动画变量
@keyframes 动画变量名（taoren） {
  0% {
    -webkit-transform:scale(0) translateX(0);
    transform:scale(0) translateX(0);
    opacity:.6
  }
  5% {
    -webkit-transform:scale(1) translateX(0) translateY(-80%);
    transform:scale(1) translateX(0) translateY(-80%);
    opacity:.8
  }
  20% {
    opacity:1
  }
  30% {
    opacity:.2
  }
  32% {
    opacity:0;
    visibility:hidden
  }
  50% {
    -webkit-transform:scale(1.9) translateX(-40px) translateY(-340%);
    transform:scale(1.9) translateX(-40px) translateY(-340%)
  }
  100% {
    -webkit-transform:translateX(-100px);
    transform:translateX(-100px)
  }
}
- 将动画变量绑定到相应的元素样式中
.相应原始的Class名称 {
  animation:taoren
}


（3）JS循环逻辑的控制

在元素和动画都具备的基础之上，接下来进行更重要的操作：将元素所设置的动画按照特定的规则进行重复播放。

  • JS中要实现重复播放的逻辑，通常的做法是使用setInterval方法
      this.interval = setInterval((function() {
        // 动画逻辑
        }
      ), this.intervalTime)


四、完整源码

代码基于vue 2语法编写，拷贝出来需保存为.vue文件。该示例代码中，包括三大模块：<script>,<template>,<style>，三大模块的作用分别是：控制元素逻辑和数据绑定,编写组织页面元素的渲染,控制和渲染元素的样式。

<template>
  <view class="center">
    <view class="container">
      <image class="dot" src="randomImg"  style="width: 92px;height: 92px;border-radius: 50px;"></image>
      <view class="pulse"></view>
      <view class="pulse1"></view>
      <view class="prize-flying" >
        <view v-for="(item,index) in flyLeftList" class="fly-prize fly-left" 
        :style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
        <view v-for="(item,index) in flyCenterList" class="fly-prize fly-center"
        :style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
        <view v-for="(item,index) in flyRightList" class="fly-prize fly-right"
        :style="{ 'background': 'url('+ item.img +')', '-webkit-animation-duration': flySpeed + 's','animation-duration': flySpeed + 's' }"></view>
      </view>
    </view>
    <view class="flex justify-center items-center match-button" @click="showMan">
      <view class="match-btn">
        心动匹配
      </view>
    </view>
    </view>
</template>
<script>
  import utils from '@/utils/utils'
  export default {
    components: {utils},
    data() {
      return {
        show:false,
        randomImg:'/static/imgs/mm1.jpg',
        flyLeftList: [],
        flyCenterList: [],
        flyRightList: [],
        userList:[{img:'/static/imgs/mm1.jpg'},{img:'/static/imgs/mm2.jpg'},{img:'/static/imgs/mm3.jpg'}],
        flySpeed: 25,
        indexRecord: 0,
        intervalTime: 2.5,
        interval: null,
      };
    },
    // 从后台进入前台显示
    onShow() {
      this.flyLeftList=[];
      this.flyCenterList=[];
      this.flyRightList=[];
      this.refreshUser();
    },
    // 从前台进入后台
    onHide() {
      this.flyLeftList=[];
      this.flyCenterList=[];
      this.flyRightList=[];
      clearInterval(this.interval);
    },
    methods:{
      showMan(){
        console.log('========')
        this.show =true
      },
      refreshUser(){
        this.flyInterval();
      },
      flyInterval() {
        if(this.interval != null){
          clearInterval(this.interval);
        }
        var t = this;
        this.pushFlyList(),
        this.interval = setInterval((function() {
          t.pushFlyList()
        }
        ), 1e3 * this.intervalTime)
      },
      pushFlyList() {
        var t = 0;
        while (t < 3) {
          this.indexRecord == this.userList.length - 1 ? this.indexRecord = 0 : this.indexRecord++;
          var a = this.userList[this.indexRecord];
            switch (t) {
              case 0:
                this.flyLeftList.push(a);
                break;
              case 1:
                this.flyCenterList.push(a);
                break;
              case 2:
                this.flyRightList.push(a);
                break
            }
          t++ 
        }
      },
    }
  }
</script>
<style lang="scss">
page{
  height: 100%;
  background: url('~@/static/imgs/home/bg.png');
}
.match-button{
  background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  color: #ffff;
  border-radius: 100rpx;
  padding: 20rpx;
}
.center {
  height: 100%;
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //background-color: red;
}
@keyframes warn {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
  }
  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}
@keyframes warn1 {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.0;
  }
  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 0.0;
  }
}
.container {
  position: relative;
  width: 96px;
  height: 96px;
  /*border: 1px solid #000; hovertree.com */
}
/* 保持大小不变的小圆圈 何问起 */
.dot {
  position: absolute;
  width: 92px;
  height: 92px;
  //left: -2.5px;
    //top: -2.5px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  //border: 2px solid red;
  border-radius: 50%;
  z-index: 2;
  animation: msClock 1.8s linear infinite; 
}
@keyframes msClock{ 
  0%,90%,100%{ transform: rotate(0) scale(1);}
  20%,40%{ transform: rotate(-15deg) scale(1.1);}
  30%,50%{ transform: rotate(15deg) scale(1.1);}
}
/* 产生动画（向外扩散变大）的圆圈  */
.pulse {
  position: absolute;
  width: 320px;
  height: 320px;
    left: -120px;
    top: -120px;
  border: 6px solid $dating-color-primary;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  -webkit-animation: warn 2s ease-out;
  -moz-animation: warn 2s ease-out;
  animation: warn 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px $dating-color-primary;
}
.pulse1 {
  position: absolute;
  width: 320px;
  height: 320px;
    left: -120px;
    top: -120px;
  border: 6px solid $dating-color-primary;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  -webkit-animation: warn1 2s ease-out;
  -moz-animation: warn1 2s ease-out;
  animation: warn1 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  box-shadow: 1px 1px 30px $dating-color-primary;
}
a{color:blue;text-decoration:none;}
.match-button{
  position: fixed;
  bottom: calc(var(--status-bar-height) + 120rpx);
}
.prize-flying{
  z-index:99;
  width:100px;
  position:absolute;
  bottom:50%;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%)
}
.prize-flying .fly-prize {
  text-align:center;
  position:absolute;
  top:100%;
  opacity:0;
  width:39px;
  height:39px;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  border-radius:50%;
  background:#fff;
  padding:7px
}
.showCard {
  z-index:10;
  animation:warn
}
.prize-flying .fly-left {
  left:0;
  z-index:5;
  animation:flyleft-data-v-1a236634
}
.prize-flying .fly-center {
  left:30px;
  z-index:3;
  animation:flycenter-data-v-1a236634
}
.prize-flying .fly-right {
  right:0;
  z-index:5;
  animation:flyright-data-v-1a236634
}
@keyframes flyleft-data-v-1a236634 {
  0% {
    -webkit-transform:scale(0) translateX(0);
    transform:scale(0) translateX(0);
    opacity:.6
  }
  5% {
    -webkit-transform:scale(1) translateX(0) translateY(-80%);
    transform:scale(1) translateX(0) translateY(-80%);
    opacity:.8
  }
  20% {
    opacity:1
  }
  30% {
    opacity:.2
  }
  32% {
    opacity:0;
    visibility:hidden
  }
  50% {
    -webkit-transform:scale(1.9) translateX(-40px) translateY(-340%);
    transform:scale(1.9) translateX(-40px) translateY(-340%)
  }
  100% {
    -webkit-transform:translateX(-100px);
    transform:translateX(-100px)
  }
}
@keyframes flycenter-data-v-1a236634 {
  0% {
    -webkit-transform:scale(0) translateX(0);
    transform:scale(0) translateX(0);
    opacity:.6
  }
  5% {
    -webkit-transform:scale(1) translateX(0) translateY(-80%);
    transform:scale(1) translateX(0) translateY(-80%);
    opacity:.8
  }
  20% {
    opacity:1
  }
  30% {
    opacity:.2
  }
  32% {
    opacity:0;
    visibility:hidden
  }
  34% {
    opacity:0
  }
  50% {
    -webkit-transform:scale(1.9) translateX(0) translateY(-340%);
    transform:scale(1.9) translateX(0) translateY(-340%)
  }
  100% {
    -webkit-transform:translateX(0);
    transform:translateX(0)
  }
}
@keyframes flyright-data-v-1a236634 {
  0% {
    -webkit-transform:scale(0) translateX(0);
    transform:scale(0) translateX(0);
    opacity:.6
  }
  5% {
    -webkit-transform:scale(1) translateX(0) translateY(-80%);
    transform:scale(1) translateX(0) translateY(-80%);
    opacity:.8
  }
  20% {
    opacity:1
  }
  30% {
    opacity:.2
  }
  32% {
    opacity:0;
    visibility:hidden
  }
  34% {
    opacity:0
  }
  50% {
    -webkit-transform:scale(1.9) translateX(40px) translateY(-340%);
    transform:scale(1.9) translateX(40px) translateY(-340%)
  }
  100% {
    -webkit-transform:translateX(100px);
    transform:translateX(100px)
  }
}
</style>


文章标签：
JavaScript
前端开发
移动开发
开发框架
小程序
qasxfte752dni
目录
相关文章
chnjames
|
6天前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器：简繁体切换功能完全指南
随着全球化的发展，支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能，以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数，开发者可以方便地实现语言切换，从而提升用户体验。文章中还附带了示例代码和效果图，帮助读者更好地理解和应用这一功能。
chnjames
31 0
微信小程序多语言切换神器：简繁体切换功能完全指南
chnjames
|
6天前
|
开发框架 小程序 JavaScript
小程序代码丢失！反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而，现在的小程序开发框架采用像 Babel 这样的打包工具，将 JavaScript 逻辑代码混合在一个文件中并进行转编译，使其变得难以理解。
chnjames
14 0
小程序代码丢失！反编译找回
bruce_xiaowei
|
18天前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
bruce_xiaowei
14 1
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
wishCoding
42 0
rbvb2ms5saimy
|
1月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码，包括电商系统、同城拼车、博客等多种应用，涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例，适合初学者和开发者参考学习。提取码：8888，代码效果参考：http://www.603393.com/sitemap.xml。
rbvb2ms5saimy
47 2
路边两盏灯
|
2月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
路边两盏灯
37 1
游客zi3qmblbcdexu
|
2月前
|
小程序 前端开发 开发者
微信小程序实现分享朋友圈功能
【8月更文挑战第21天】
游客zi3qmblbcdexu
102 1
番茄酱脑袋
|
2月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
番茄酱脑袋
83 1
如夜了我衣衫太薄便归家靠路灯
|
2月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付（代码和注释很详细）
微信小程序实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
1175 0
石小石Orz
|
2月前
|
小程序 JavaScript 前端开发
微信小程序开发必备前置知识：基本代码构成与语法
【8月更文挑战第8天】微信小程序的基本代码构成与语法
石小石Orz
85 0
微信小程序开发必备前置知识：基本代码构成与语法

热门文章

最新文章

  • 1
    阿里20亿小程序繁星计划你最需要知道的几个问题（0325更新）
  • 2
    小程序审核常见驳回类型
  • 3
    大型网站重构指南 第1.3部分：前端监控和小程序监控 Sentry
  • 4
    检测本机是否安装JRE的小程序
  • 5
    微信小程序页面之间的传值
  • 6
    微信小程序把玩(三)tabBar底部导航
  • 7
    微信小程序实用工具——渐变色按钮（二）
  • 8
    微信小程序把玩（十四）button组件
  • 9
    微信小程序获取input值的方法
  • 10
    【视频教程】微信小程序开发-初探篇
  • 1
    小程序和vue写法的区别
    50
  • 2
    小程序和页面生命周期详解
    46
  • 3
    小程序；vue；uniapp优缺点（各5条）
    117
  • 4
    UniApp与微信小程序介绍及区别
    516
  • 5
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    488
  • 6
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    250
  • 7
    轻松学会微信小程序开发（一）
    204
  • 8
    使用阿里云短信+微信短链接跳转微信小程序
    423
  • 9
    【专栏】小程序图片合成就绪渲染的转变，从异步并发渲染到同步阻塞渲染
    83
  • 10
    微信小程序开发1
    132

    • 相关课程

    更多
  • IoT小程序框架课程
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 【新人赛】工业蒸汽量预测建模算法代码开源分享合集
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 面向运维的 python 脚本速成-1024程序员节创造营公益课

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 基于函数计算一键部署掌上游戏机
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片