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

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

想要在微信小程序中制作多个元素逐一渐入的效果，效果类似下图：

首先参考微信开发文档API动画部分的内容
开发文档API–动画Animation

创建动画执行函数

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()    
    }）
}

前台页面为：

<!--animation="{{animation1}}"即为其对应绑定的动画，key为animation1（js处setData的值this.animation.export()  ）-->
<!--wx:for="{{list}}"为循环打印的后台元素集合list-->
<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()进行后台访问
此处需注意：

调用request的具体方法参考官方文档：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值：
参考
对代码进行修改：



修改后：
xml:

    <!--pages/test/test.wxml-->
<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中添加的新语法特性，学无止境~~