微信小程序动画渐入以及动态存值setdata问题

- 日理万妓 2021-11-01 06:00 464阅读 0赞

## 微信小程序动画渐入以及动态存值setdata问题 ##

想要在微信小程序中制作多个元素逐一渐入的效果，效果类似下图：  
![实现效果][20190810171731914.gif]  
首先参考微信开发文档API动画部分的内容  
[开发文档API–动画Animation][API_Animation]

![文档页有详情--demo][--demo]  
创建动画执行函数

animationShow: function (){   
         //创建动画对象    
         this.animation = wx.createAnimation({  
             duration: 2000,//动画执行时间      
             timingFunction: 'ease',//动画以低速开始，然后加快，在结束前变慢      
             delay:delay//延迟时间    
        }); 
        //此处为动画执行内容-----透明度变化至1--y轴位移至0   
        this.animation.translateY(0).opacity(1).step();    
        this.setData({
        	//[ ]--------用中括号将变量包含其中，否则作为页面元素名称解析    
        	//此处animation为绑定xml内对应的元素
        	//（此处animation类似字符串形式，并非变量---类似Map存储的键值对）  
            animation1: this.animation.export()    
        }）
    }

前台页面为：

<view class="init" wx:for="{
       {list}}" animation="{
       {animation1}}">    姓名：{
       {item}}</view>

并需要先为其添加css样式，先让其隐藏，即y轴-80px,透明度设为0：

.init { 
    	opacity: 0; 
    	transform: 
    	translateY(-80px)
    }

后台数据传入，此处采用SpringBoot框架进行后台搭建：

/**
     * 小程序调用测试
     * @return
     */
    @ResponseBody
    @RequestMapping("getUser")
    public Map<String, Object> getUser(){
        System.out.println("微信小程序正在调用。。。");
        Map<String, Object> map = new HashMap<String, Object>();
        List<String> list = new ArrayList<String>();
        list.add("zhangsan");
        list.add("lisi");
        list.add("wanger");
        list.add("mazi");
        map.put("list",list);
        System.out.println("微信小程序调用完成。。。");
        return map;
    }

微信前台通过js调用wx.request()进行后台访问  
此处需注意：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzM5Mzc0_size_16_color_FFFFFF_t_70][]  
调用request的具体方法参考官方文档：[API网络][API]

houduanButton1:function(){
        var that = this;
        var animationIN = this.animationShow()；
        
        /**
        *网络请求部分----得到后台list并传入page中的data内
        **/
    
        wx.request({
                url: 'http://localhost:8080/getUser',
                method:'GET',
                header: {
          		  'content-type': 'application/json' // 默认值
        	    },
        	    success:function(res){
            
            		var list = res.data.list;
            		if(list == null){
                		var result = "数据获取失败";
                		wx.showToast({
                        		title: result,
                        		icon:'loading',
                       		duration:2000
          			})
              	 }else{
                	 	result = "数据获取成功！！";
                	 	//显示结果--------即gif中的勾
               		x.showToast({
                        		title: result,
                        		icon: 'success',
                        		duration: 2000
          		})
       		that.setData({
                        list:list//传递数据
          		});
    	}
        }
    })
    },

此时无动态效果，考虑到元素需要逐个渐入，所以需要给其一个delay值：  
[参考][Link 1]  
对代码进行修改：  
![对不同list\[index\]绑定不同animation][list_index_animation]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzM5Mzc0_size_16_color_FFFFFF_t_70 1]  
![前台数据绑定][20190810180707964.png]  
修改后：  
xml:

<button class="init"bindtap='houduanButton1'animation="{
       {animation1}}">点击发起请求</button>
    <view class="init" wx:for="{
       {list}}" animation="{
       {animationlist[index]}}">
        姓名：{
       {item}}
    </view>
    
    <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'animation="{
       {animation1}}"></input>
    <button class="init"bindtap='houduanButton2'animation="{
       {animation1}}">查询</button>
    <view wx:if="{
       {message!=''}}">
        {
       {message}}
    </view>
    
    <swiper indicator-dots="{
       {indicatorDots}}"
        autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}">
      <block wx:if="{
       {imgUrls}}"wx:for="{
       {imgUrls}}">
        <swiper-item>
          <image src="{
       {item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>

js:

// pages/test/test.js
    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            imgUrls:"",
                    indicatorDots: false,
                    autoplay: true,
                    interval: 5000,
                    duration: 1000,
                    animation1: "",
                    animationlist: "",
                    list:""
        },
        /**
         * 动画实现
         */
        animationShow: function (animationname,delay){
            //var animation1 = this.data.animation1;
            console.log(animationname)//传入名称----字符串
            //创建动画对象
            this.animation = wx.createAnimation({
                    duration: 2000,//动画执行时间
                    timingFunction: 'ease',//动画以低速开始，然后加快，在结束前变慢
                    delay:delay//延迟时间
    });
            this.animation.translateY(0).opacity(1).step();
            this.setData({
                    //[]--------用中括号将变量包含其中，否则作为页面元素名称解析
                    [animationname]: this.animation.export()
    })
    
        },
    
        houduanButton1:function(){
            var that = this;
            var animationIN = this.animationShow();
            console.log(this.data.list);
            wx.request({
                    url: 'http://localhost:8080/getUser',
                    method:'GET',
                    header: {
                'content-type': 'application/json' // 默认值
            },
            success:function(res){
                //console.log(res.data);
                var list = res.data.list;
                if(list == null){
                    var result = "数据获取失败";
                    wx.showToast({
                            title: result,
                            icon:'loading',
                            duration:2000
          })
                }else{
                    result = "数据获取成功！！";
                    wx.showToast({
                            title: result,
                            icon: 'success',
                            duration: 2000
          })
                    //console.log(list)
                    that.setData({
                            list:list
          });
                    console.log(list)
                    var animationlist = that.data.animationlist;
                    //调用自定义函数，this.
                    for (var i = 0; i < list.length; i++) {
                        that.animationShow("animationlist["+i+"]",i * 100)
                    };
    
                }
            }
    })
            //this.animationShow()
        },
        //获取输入框的内容
        houduanTab_input: function (e) {
            this.setData({
                    word1: e.detail.value//实时输入值
    });
            console.log(e.detail);
        },
        // houduanButton2的网络请求
        houduanButton2: function () {
            var that = this;
            console.log(that);
            wx.request({
                    url: 'http://localhost:8080/getWord',
                    data: {
                word1: that.data.word1//输入值
            },
            method: 'GET',
                    header: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                console.log(res.data)//打印到控制台
                var message = res.data.message;
                if (message == null) {
                    var toastText = '数据获取失败';
                    wx.showToast({
                            title: toastText,
                            icon: '',
                            duration: 2000
          });
                } else {
                    that.setData({
                            message: message
          })
                }
            }
    })
        },
        onLoad: function (options) {
            var that = this;
            //调用动画
            this.animationShow('animation1',1);
            wx.request({
                    url: 'http://localhost:8080/save',
                    method: 'GET',
                    header: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                console.log(res.data)//打印到控制台
                var images = res.data.img;
                if (images == null) {
                    var toastText = '数据获取失败';
                    wx.showToast({
                            title: toastText,
                            icon: '',
                            duration: 2000
          });
                } else {
                    that.setData({
                            imgUrls :images
          })
                }
            }
    })
        },
    
    })

后台：

package com.example.demo02.controller;
    
    import com.example.demo02.controller.DomObject.User;
    import com.example.demo02.controller.DomObject.UserDaoImpl;
    import com.example.demo02.controller.DomObject.UserService;
    import com.sun.deploy.net.HttpResponse;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.HttpRequest;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.util.*;
    
    @Controller
    public class Hello {
        @Autowired
        private UserService p;
        @ResponseBody
        @RequestMapping("/helloWX")
        public String hello(){
            System.out.println("222222");
    //        p.getUser();
    //        System.out.println(p.getUser());
            return "hello!";
        }
    
        /**
         * 连接数据库
         * @param
         * @return
         */
        @ResponseBody
        @RequestMapping("/save")
        public Map<String, List>  save(HttpServletRequest request, HttpServletResponse response) {
            User user = new User();
            System.out.println("11111111111");
            user.setDm_username("dvsavwww");
            p.save(user);
            Map<Integer, String>  image = p.getImage();
            List<String> lists = new ArrayList<>();
            Iterator<Integer> iterator = image.keySet().iterator();
            while(iterator.hasNext()){
                Integer key = iterator.next();
                //System.out.println((String)image.get(key));
                String s = image.get(key);
                System.out.println(s);
                lists.add(s);
            }
            Map<String,List> mapp = new HashMap<>();
            mapp.put("img",lists);
            HttpSession session = request.getSession();
            session.setAttribute("images",image);
            return mapp;
        }
    
        @RequestMapping(value="/params", method = RequestMethod.GET)
        /* 后台用Map方法向前端传递参数
         * 传递的参数为message1: String, message2: String, user: User对象
         */
        public String passParam(Map <String, Object> map){
    
            map.put("message1", "Hello, Spring Boot!");
    
            map.put("message2", "Hello, Spring Boot!");
            System.out.println("params");
            //User user = new User(18, "Bruce");
    
            //map.put("user", user);
    
            return "hh";
    
        }
    
        /**
         * 小程序调用测试
         * @return
         */
        @ResponseBody
        @RequestMapping("getUser")
        public Map<String, Object> getUser(){
            System.out.println("微信小程序正在调用。。。");
            Map<String, Object> map = new HashMap<String, Object>();
            List<String> list = new ArrayList<String>();
            list.add("zhangsan");
            list.add("lisi");
            list.add("wanger");
            list.add("mazi");
            map.put("list",list);
            System.out.println("微信小程序调用完成。。。");
            return map;
        }
    
        @ResponseBody
        @RequestMapping("getWord")
        public Map<String, Object> getText(String word1){
            Map<String, Object> map = new HashMap<String, Object>();
            System.out.println(word1);
            System.out.println("调用~~~");
            String message = "我能力有限，不要为难我";
            if ("后来".equals(word1)) {
                message="正在热映的后来的我们是刘若英的处女作。";
            }else if("微信小程序".equals(word1)){
                message= "想获取更多微信小程序相关知识，请更多的阅读微信官方文档，还有其他更多微信开发相关的内容，学无止境。";
            }else if("西安工业大学".equals(word1)){
                message="西安工业大学（Xi'an Technological University）简称”西安工大“，位于世界历史名城古都西安，是中国西北地区唯一一所以兵工为特色，以工为主，理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一（“兵工七子”），陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位，是一所以\"军民结合，寓军于民\"的国防科研高校。";
            }
            map.put("message", message);
            System.out.println("完成~~");
            return map;
        }
        @RequestMapping("")
        public String getText(){
            return "hello world";
        }
    
        @ResponseBody
        @RequestMapping("images")
        public Map<String,Object> getImages(){
            HashMap<String, Object> maps = new HashMap<>();
            System.out.println("图片获取~~~");
    
            System.out.println("图片获取成功~");
            return maps;
        }
    
    
    }

实现效果。  
**了解到中括号中添加变量为es6中添加的新语法特性，学无止境~~**

[20190810171731914.gif]: /images/20211101/a390eda982154adb94845e0d5bdb1d18.png
[API_Animation]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
[--demo]: /images/20211101/c9b28c5db1c6443d91dce3094379dab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzM5Mzc0_size_16_color_FFFFFF_t_70]: /images/20211101/c04011aa4b0545b9b310eb5d5b751aa2.png
[API]: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
[Link 1]: https://www.jb51.net/article/162980.htm
[list_index_animation]: /images/20211101/14f517e6f20b41c79b86925c115a88b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzM5Mzc0_size_16_color_FFFFFF_t_70 1]: /images/20211101/17cb403e892746318e6d8e2463ac6c00.png
[20190810180707964.png]: /images/20211101/7e47f0da59994d2c85b928efd5f3241a.png