首页 > 代码库 > 项目实战①—高仿知乎日报（1）逼真的开场动画

项目实战①—高仿知乎日报（1）逼真的开场动画

2024-08-06 10:54:54   218人阅读

在这一篇开头我要感谢我的老师李卫民同志，没有他这个东西做不出来，有了他这个Demo逼近真正的XX日报


〇联网工具类的争论

在联网工具类中，有人说，Xutils 比volly牛逼，又有人说其实volly性能很差，不过我这一篇文章用的就是volly，我感觉不到差距在哪，反而觉得用起来很爽。其实我自己用的就是Xutils不过后面demo写下不下去了，经过李同志的代码重构，得以完全。



① 如何使用Volley

1.什么是Volley

我们在程序中需要和网络通信的时候，大体使用的东西莫过于AsyncTaskLoader，HttpURLConnection，AsyncTask，HTTPClient（Apache）等
Google I/O 2013上，Volley发布了。Volley是Android平台上的网络通信库，能使网络通信更快，更简单，更健壮。
在Google IO的演讲上，其配图是一幅发射火弓箭的图，有点类似流星。
 

2.为什么要使用Volley

1.传统的网络通信方式
从网上下载图片的步骤可能是这样的流程

1.在ListAdapter#getView()里开始图像的读取。

2.通过AsyncTask等机制使用HttpURLConnection从服务器去的图片资源

3.在AsyncTask#onPostExecute()里设置相应ImageView的属性。


有些会导致重复加载的情况

1.屏幕旋转的时候

2.使用ListView快速滚动的时候


2.Volley提供的功能

1.JSON，图像等的异步下载
2.网络请求的排序（scheduling）
3.网络请求的优先级处理
4.缓存
5.多级别取消请求
6.Activity和生命周期的联动（Activity结束时同时取消所有网络请求）


好啦 感觉越来越像教学帖子了，回到项目贴了。我在Demo里面用到也就是图片加载，和网络加载

图片加载 NetworkImageView
一、缓存在内存中
二、缓存在cache文件夹
三、直接可以通过Url加载图片 
以上自己总结，不全.......仅供参考
json加载 RequestQueue 

OK ，XX日报的首页效果，是通过动画效果实现的，还记得我写过一篇贴子，通过动画实现 电池的变化，也是动画的一种实现 
练手小项目（5）安全卫士_电源管理

好啦 我还是按照我的教学步骤 先看布局 其实Volly的图片加载适合SmartImageview是一样的  布局如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/img_start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/img_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:src=http://www.mamicode.com/"@drawable/splash_logo">
②代码编写
其实NetworkImageView里面是需要靠联网获取的。
再看java代码

1.初始化组件 

	/**
	 * 初始化界面
	 */
	private void initView() {
		imgStart = (NetworkImageView) findViewById(R.id.img_start);
	}

2.初始化数据使用volly框架

	/**
	 * 初始化数据
	 */
	private void initData() {
		mQueue = Volley.newRequestQueue(getApplicationContext());
		//第一个参数 请求方式，第二个参数是URL，第三个参数 返回数据设为空我不是用post，第四个参数 监听器接收JSON响应
		mQueue.add(new JsonObjectRequest(Method.GET, API.getStartImageUrl(), null, new Listener<JSONObject>() {
			@Override
			public void onResponse(JSONObject response) {
				try {
					//使用volly框架直接加在图片
					String imgUrl = response.getString("img");
					imgStart.setImageUrl(imgUrl, new ImageLoader(mQueue, new BitmapCache()));
					
					// 图片动画
					Animation animation = new ScaleAnimation(1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 将图片放大1.2倍，从中心开始缩放
					animation.setDuration(2000); // 动画持续时间
					animation.setFillAfter(true); // 动画结束后停留在结束的位置
					animation.setAnimationListener(WelcomeActivity.this); // 添加动画监听
					imgStart.startAnimation(animation); // 启动动画
				} catch (JSONException e) {
					e.printStackTrace();
				}
			}
		}, null));
	}
3.设置动画监听动画结束后跳转
	// 动画监听

	@Override
	public void onAnimationStart(Animation animation) {
		
	}

	@Override
	public void onAnimationEnd(Animation animation) {
		// 动画结束时跳转至首页
		startActivity(new Intent(this, MainActivity.class));
		finish();
	}

	@Override
	public void onAnimationRepeat(Animation animation) {
		
	}


全部代码 
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.ScaleAnimation;

import com.android.volley.Request.Method;
import com.android.volley.RequestQueue;
import com.android.volley.Response.Listener;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.NetworkImageView;
import com.android.volley.toolbox.Volley;
import com.qf.teach.project.zhihudaily.R;
import com.qf.teach.project.zhihudaily.c.API;
import com.qf.teach.project.zhihudaily.cache.BitmapCache;

public class WelcomeActivity extends Activity implements AnimationListener {
	private NetworkImageView imgStart;
	private RequestQueue mQueue;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_welcome);
		
		initView();
		initData();
	}

	/**
	 * 初始化界面
	 */
	private void initView() {
		imgStart = (NetworkImageView) findViewById(R.id.img_start);
	}
	
	/**
	 * 初始化数据
	 */
	private void initData() {
		mQueue = Volley.newRequestQueue(getApplicationContext());
		//第一个参数 请求方式，第二个参数是URL，第三个参数 返回数据设为空我不是用post，第四个参数 监听器接收JSON响应
		mQueue.add(new JsonObjectRequest(Method.GET, API.getStartImageUrl(), null, new Listener<JSONObject>() {
			@Override
			public void onResponse(JSONObject response) {
				try {
					//使用volly框架直接加在图片
					String imgUrl = response.getString("img");
					imgStart.setImageUrl(imgUrl, new ImageLoader(mQueue, new BitmapCache()));
					
					// 图片动画
					Animation animation = new ScaleAnimation(1.0f, 1.2f, 1.0f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 将图片放大1.2倍，从中心开始缩放
					animation.setDuration(2000); // 动画持续时间
					animation.setFillAfter(true); // 动画结束后停留在结束的位置
					animation.setAnimationListener(WelcomeActivity.this); // 添加动画监听
					imgStart.startAnimation(animation); // 启动动画
				} catch (JSONException e) {
					e.printStackTrace();
				}
			}
		}, null));
	}
	
	// 动画监听

	@Override
	public void onAnimationStart(Animation animation) {
		
	}

	@Override
	public void onAnimationEnd(Animation animation) {
		// 动画结束时跳转至首页
		startActivity(new Intent(this, MainActivity.class));
		finish();
	}

	@Override
	public void onAnimationRepeat(Animation animation) {
		
	}
}








项目实战①—高仿知乎日报（1）逼真的开场动画


联系
我们