Android实战简易教程<十七>(LayoutAnimation布局动画)

本文介绍了一个使用LayoutAnimationController实现的布局动画实例。通过加载zoom_in.xml动画文件,为ListView中的每一项添加缩放与透明度变化效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们对Tween和Frame动画比较熟悉,下面我们通过一个实例来了解一下LayoutAnimation(布局动画)

首先我们要建立一个动画文件zoom_in.xml:

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <scale  
  5.         android:duration="1000"  
  6.         android:fromXScale="0.1"  
  7.         android:fromYScale="0.1"  
  8.         android:pivotX="50%"  
  9.         android:pivotY="50%"  
  10.         android:toXScale="1.0"  
  11.         android:toYScale="1.0" />  
  12.   
  13.     <alpha  
  14.         android:duration="1000"  
  15.         android:fromAlpha="0"  
  16.         android:toAlpha="1.0" />  
  17.   
  18. </set>  


main.xml:

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <scale  
  5.         android:duration="1000"  
  6.         android:fromXScale="0.1"  
  7.         android:fromYScale="0.1"  
  8.         android:pivotX="50%"  
  9.         android:pivotY="50%"  
  10.         android:toXScale="1.0"  
  11.         android:toYScale="1.0" />  
  12.   
  13.     <alpha  
  14.         android:duration="1000"  
  15.         android:fromAlpha="0"  
  16.         android:toAlpha="1.0" />  
  17.   
  18. </set>  

MainActivity.java:

[java]  view plain copy
  1. package com.example.layoutanimationdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.support.v7.app.ActionBarActivity;  
  7. import android.support.v7.app.ActionBar;  
  8. import android.support.v4.app.Fragment;  
  9. import android.R.anim;  
  10. import android.content.Loader.ForceLoadContentObserver;  
  11. import android.os.Bundle;  
  12. import android.view.LayoutInflater;  
  13. import android.view.Menu;  
  14. import android.view.MenuItem;  
  15. import android.view.View;  
  16. import android.view.ViewGroup;  
  17. import android.view.animation.Animation;  
  18. import android.view.animation.AnimationUtils;  
  19. import android.view.animation.LayoutAnimationController;  
  20. import android.widget.ArrayAdapter;  
  21. import android.widget.ListView;  
  22. import android.os.Build;  
  23.   
  24. public class MainActivity extends ActionBarActivity {  
  25.     private List list = new ArrayList();  
  26.     private ListView listView;  
  27.   
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         setContentView(R.layout.activity_main);  
  32.         listView = (ListView) findViewById(R.id.list);  
  33.   
  34.         for (int i = 0; i < 20; i++) {  
  35.             list.add("测试条目" + i);  
  36.         }  
  37.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(  
  38.                 MainActivity.this, android.R.layout.simple_list_item_1, list);  
  39.         listView.setAdapter(adapter);  
  40.         LayoutAnimationController layoutAnimationController = new LayoutAnimationController(  
  41.                 AnimationUtils.loadAnimation(this, R.anim.zoom_in));  
  42.         layoutAnimationController  
  43.                 .setOrder(LayoutAnimationController.ORDER_NORMAL);  
  44.         listView.setLayoutAnimation(layoutAnimationController);  
  45.         listView.startLayoutAnimation();  
  46.   
  47.     }  
  48. }  


运行实例:

总结:

1.LayoutAnimationController 控制器,引入动画文件;

2.setOrder(LayoutAnimationController.ORDER_NORMAL);设置显示顺序,多种显示风格可选;

3.listView.setLayoutAnimation(layoutAnimationController);//设定动画

listView.startLayoutAnimation();//启动动画

<%@ page language="java" import="supermarket.connDb,java.util.* " contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% ArrayList<String[]> list = connDb.index_4(); ArrayList<String[]> list2 = connDb.index_5(); %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts supermarket</title> <link href="./css/style.css" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="#"/> <script src="./js/echarts.min.js"></script> <script src="./js/echarts.js"></script> <script src="./js/style/macarons.js"></script> <script src="./js/style/roma.js"></script> <script src="./js/style/vintage.js"></script> </head> <body> <div class='header'> <p>ECharts supermarket</p> </div> <div class="content"> <div class="nav"> <ul> <li><a href="./SMindex.jsp">总商品品类成交对比</a></li> <li><a href="./SMindex1.jsp">饮品成交量对比</a></li> <li><a href="./SMindex2.jsp">各省会员人数</a></li> <li><a href="./SMindex3.jsp">男女购买商品对比</a></li> <li class="current"><a href="#">商品购买关系</a></li> </ul> </div> <div class="container"> <div class="title">超市商品购买关系</div> <div class="show"> <div class='chart-type'></div> <div id="main" style="width:700px;height:500px"></div> </div> </div> </div> <script> var supermarketContainer=document.getElementById('main'); //基于准备好的dom,初始化echarts实例 var myChart = echarts.init(supermarketContainer); //指定图表的配置项和数据 <% ArrayList list11 = new ArrayList(); for(int i =0;i<list.size();i++){ list11.add(list.get(i)[0]); list11.add(list.get(i)[1]); } System.out.println(list11); LinkedHashSet<Integer>hashSet =new LinkedHashSet(list11); ArrayList<Integer>list1 =new ArrayList(hashSet); //System.out.println(list1); %> var nodes =[]; <% for(int i =0; i<list1.size(); i++){ %> nodes.push({ name: '<%=list2.get(i)[1]%>', id: '<%=list2.get(i)[0]%>', symbolSize: 20, symbol:'circle',}) <% } %> console.log(nodes) var links =[]; <% for(int i =0; i<list.size();i++){ String temp =list.get(i)[2]; double temp1 =Double.parseDouble(temp); double temp2 =temp1 * 10; temp1 =temp1 * 100; temp =String.format("%.2f", temp1).toString()+"%"; //System.out.println(temp); %> links.push({ source: '<%=list.get(i)[0]%>', target: '<%=list.get(i)[1]%>', lineStyle: {width: '<%=temp2%>'}, relation: {name: '<%=temp%>'}}) <% } %> console.log(links) var option ={ title: { text: '超市商品购买关系图', left: 'left', //top: 20, textStyle: { //color: '#ccc' } }, tooltip : { trigger: 'item' //formatter: "{a} <br/>{b} : {c} ({d}%)" }, visualMap: { show: false, min: 80, max: 600, inRange: { //colorLightness: [0, 1] } }, grid:{ containable:true }, series : [ { type: 'graph', layout: 'force', nodes: nodes, links: links, force: { repulsion:100, gravity:0.03, edgeLength:80, layoutAnimation:false }, itemStyle: { normal: { opacity:0.9, color:function(params){ var colorList=[ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0', ]; return colorList[params.dataIndex] } } }, lineStyle: { normal: { show:true, color:'target', width:5 } }, label: { show: true, position: "bottom", distance: 5, fontSize: 10, align: "center", }, autoCurveness: 0.01, edgeLabel: { show: true, position: "middle", fontSize: 10, formatter: (params) =>{ return params.data.relation.name; }, }, edgeSymbol: ["circle", "arrow"], } ] }; // 使用刚指定的配置项和数据显示图表 option && myChart.setOption(option); //}} </script> </body> </html>这是index.jsp代码Tomcat7.0
最新发布
05-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值