flex 播放gif动画

今天闲来无事网上搜下flex播放gif动画 同时推荐一个不错的gif动画系列 史前动物 百度你就知道!

Flex里Image控件插入gif动画的图片默认只显示一帧,也就是说是不会动的,我们可以借助GifPlayer类包来实现Flex里插入动画的Gif图片。
GifPlayer下载: http://code.google.com/p/as3gif/downloads/list
实例里演示了几个常用的功能:播放、停止、到第几帧播放、到第几帧停止。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute" horizontalAlign="center"
				creationComplete="init();" preloader="com.preload.PreLoad" 
				backgroundColor="0x414141" > 
	<mx:Style source="flex/yfskin/yflexskin.css" />
	<mx:Script>
		<![CDATA[
			import flash.net.URLRequest;
			import org.gif.player.GIFPlayer;
			import org.gif.events.FileTypeEvent;
			import org.gif.events.GIFPlayerEvent;
			import org.gif.events.FrameEvent;
			import org.gif.events.TimeoutEvent;
			private var _myGIFPlayer:GIFPlayer = new GIFPlayer();//实例化GIFPlayer实例
			private var _totalFrame:Number;//总帧数
			//private var _currentFrame:Number;
			
			private function init():void 
			{
				var request:URLRequest = new URLRequest("md.gif");//同级目录下得md.gif图片
				_myGIFPlayer.load(request);
				img.addChild(_myGIFPlayer);//img控件添加播放
				_myGIFPlayer.addEventListener(GIFPlayerEvent.COMPLETE, onCompleteGIF);//载入gif图片完毕时的回调函数
				_myGIFPlayer.addEventListener(FrameEvent.FRAME_RENDERED, onFrameRendered);//读取帧的回调函数
				//_myGIFPlayer.addEventListener(TimeoutEvent.TIME_OUT, onTimeOut);
			}
			
			private function onCompleteGIF(event:GIFPlayerEvent):void 
			{
				_totalFrame = _myGIFPlayer.totalFrames;//总帧数
				totalframe.text = String(_totalFrame);
			}
			
			private function onFrameRendered(event:FrameEvent):void 
			{
				currentframe.text = String(_myGIFPlayer.currentFrame);//当前播放的帧数
			}
			
			private function onTimeOut(event:TimeoutEvent):void 
			{
				trace ("gif is error!");
			}
			
			private function play():void 
			{
				_myGIFPlayer.play();
			}
			
			private function stop():void 
			{
				_myGIFPlayer.stop();
			}
			
			private function gotoandplay():void 
			{
				var numFrame:Number = Math.floor(Math.random() * _totalFrame ) + 1;
				_myGIFPlayer.gotoAndPlay(numFrame);
				gotoplaybtn.label = "gotoPlay(" + numFrame + ")";
			}
			
			private function gotoandstop():void 
			{
				var numFrame:Number = Math.floor(Math.random() * _totalFrame ) + 1;
				_myGIFPlayer.gotoAndStop(numFrame);
				gotostopbtn.label = "gotoStop(" + numFrame + ")";
			}
		]]>
	</mx:Script>
	
	<mx:Image id="img" width="217" height="300" top="30" left="240"/>
	
	<mx:ApplicationControlBar width="80%" left="50" bottom="20" >
		<mx:Button label="Play" height="22" click="play();" styleName="primaryButton" />
		<mx:Button label="Stop" height="22" click="stop();" />
		<mx:Button id="gotoplaybtn" height="22" label="gotoPlay(rand)" click="gotoandplay();" />
		<mx:Button id="gotostopbtn" height="22" label="gotoStop(rand)" click="gotoandstop();" />
		<mx:Label text="TotalFrame:" />
		<mx:Label id="totalframe" />
		<mx:Label text="CurrentFrame:" />
		<mx:Label id="currentframe" />
	</mx:ApplicationControlBar>
	
</mx:Application>

首先感谢网上前辈的代码 但是没说明下载下来的gifPlayer怎么用 研究下 下载后的东西就几百k 目录如下

把 org文件夹(71kb左右) 考到你的工程目录下保证引包时能找到就行了 例如

import org.gif.player.GIFPlayer;
接下来就是粘贴代码 和准备gif图片 发挥你的想象编写更炫的效果!

我写了个程序循环播放某一个文件夹下所有gif图片 但是当播放完一张后载入第二张图片时速度非常慢 不知道为什么?(难道是flex编译时把gif图片也编译进去了????)



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
资源包主要包含以下内容: ASP项目源码:每个资源包中都包含完整的ASP项目源码,这些源码采用了经典的ASP技术开发,结构清晰、注释详细,帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码,用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据操作、用户权限管理等关键技术。 数据设计文件:为了方便用户更好地理解系统的后台逻辑,每个项目中都附带了完整的数据设计文件。这些文件通常包括数据结构图、数据表设计文档,以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据环境,并了解各个数据表之间的关系和作用。 详细的开发文档:每个资源包都附有详细的开发文档,文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料,使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南:为帮助用户更好地理解和使用这些ASP项目,每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程,使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考:对于正在准备毕业设计的学生来说,这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰,还符合常见的毕业设计要求和标准。通过这些项目,学生可以学习到如何从零开始构建一个完整的Web系统,并积累丰富的项目经验。
可以使用uni-app提供的页面生命周期函数中的onLoad和onReady来实现进入页面加载中的动画效果。在onLoad函数中可以设置一个loading标志位,当数据加载完成后将loading标志位设为false,然后在onReady函数中根据loading标志位的值来显示或隐藏loading动画。 具体实现可以参考以下代码: ```html <template> <view> <view v-if="loading" class="loading"> <image src="/static/loading.gif"></image> </view> <view v-else> <!-- 页面内容 --> </view> </view> </template> <script> export default { data() { return { loading: true // 初始值为true,表示页面加载中 } }, onLoad() { // 数据加载完成后将loading标志位设为false setTimeout(() => { this.loading = false; }, 2000); }, onReady() { // 根据loading标志位的值来显示或隐藏loading动画 if (this.loading) { uni.showLoading({ title: '加载中' }); } else { uni.hideLoading(); } } } </script> <style> .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); } .loading image { width: 30px; height: 30px; } </style> ``` 以上代码中,loading标志位的初始值为true,表示页面正在加载中。在onLoad函数中,通过setTimeout模拟数据加载的过程,2秒后将loading标志位设为false,表示数据加载完成。在onReady函数中,根据loading标志位的值来显示或隐藏loading动画,如果loading为true,则显示loading动画;否则隐藏loading动画
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值