Axure实现淡入淡出效果

       小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝、京东,淘宝每天会把各种打折促销、今日推荐、限时抢购等做成淡入淡入或者向右活动等类似翻页的效果放在首页,吸引顾客的眼球,那么如何使用Axure来实现淡入淡出的效果nie,在介绍具体实现的过程之前,小编先简单介绍一下什么叫做淡入淡出。 

       淡入淡出合称淡,电影画面的渐显渐隐。画面由亮转暗,以至完全隐没,这个镜头的末尾叫淡出,也叫渐隐;画面由暗变亮,最后完全清晰,这个镜头的开端叫淡入,又叫渐显。淡出淡入是电影中表示时间 空间转换的一种技巧。在电影中常用“淡”分隔时间空间,表明剧情段落。淡出表示一场戏或一个段落的终结。淡入表示一场戏或一个段落的开始,能使观众产生完整的段落感。“淡”本身不是一个镜头,也不是一个画面,它所表现的,不是形象本身,而只是画面渐隐渐显的过程。它节奏舒缓,具有抒情意味,能够造成富有表现力的气氛。这种技巧,最早是在拍摄时完成的。拍摄时,把摄影机中的遮光器逐渐打开,便得到淡入的效果。当一个镜头将要拍完时,把遮光器慢慢关上,便得到淡出的效果。随着洗印技术的发展,这种技巧转由洗印时印制。接着,小编就来简单的总结一下如何用Axure实现淡入淡出效果。

        第一步,我们来选择一个rectangle来固定我们需要选择图片的大小,如下图所示:

         

         第二步,我们把这个Rectangle转换成动态面板,如下图所示:

         

        第三步,我们给这个动态面板添加四个状态,有需要的小伙伴,可以根据自己的需要来设定相应的状态,具体操作如下:

        

        第四步,我们依次来为每个状态添加图片,如下所示:

        

        第五步,给每个状态都各自添加一张图片,如下图所示:

        

        第六步,我们来设置事件,选择载入时,如下图所示:

        

        第七步,选择完载入时后,我们选择设置面板状态,如下图所示:

        

        第八步,小伙伴可以根据自己的需要,对效果进行相关设置,如下图所示:

        

        其与的三个状态的设置都是重复上面的步骤即可,最终的效果截图如下,小伙伴也可以 点击打开链接查看效果哦:

        

       小编寄语:小编本来想着用FSCapture录制一下动态的效果视频,然后把这个视频转换成gif格式的,但是找了好久没有找到合适的工具,可怜的小伙伴们就看不到动态的淡入淡出的gif图片了,有哪位可爱的小伙伴有合适的工具,欢迎留言告诉小编,小编不胜感激,小编已经把淡入淡出的文件上传到网上,有需要的小伙伴可以点击进行下载

       Axure,在没有实现具体的某个软件或者系统之前,可以很好的帮助我们同客户进行沟通,然后Axure的能力远远超过我们的想象,她不仅可以实现简单的跳转,显示隐藏,还有很多很多,我们不曾发现的神奇魔力,而这些神奇效果的实现,都需要小伙伴们自己去亲身实践哦!提前祝各位小伙伴端午节快乐`(*∩_∩*)′。

时间: 2024-11-02 08:52:25

Axure实现淡入淡出效果的相关文章

jQuery入门(6) 淡入淡出效果

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn() 实现淡入效果,其基本语法如下 : $(selector).fadeIn(speed,callback); 可选参数speed给出了淡入效果的时间,可以 使用 "slow","fast" 或是数值(微秒) 第二个可选参数为回调函数,在fadeIn()方法结束后调 用. $("b

PPT中制作音频淡入淡出效果教程

  PPT中制作音频淡入淡出效果教程.幻灯演示文稿PowerPoint是最常用的办公软件之一,有的小伙伴喜欢用一首歌的高潮部分来作为背景音乐,但是剪出来的音乐高潮部分还需要给它做一个淡入淡出效果,来看看具体操作步骤吧. 方法/步骤 首先在创建打开的PowerPoint 2013中插入准备好的音频文件. 操作步骤:插入 → 音频 → PC上的音频. 对于插入得到的音频图标(喇叭状),单击会出现浮动控制条,也可以通过鼠标将其拖动到合适的位置.这里为了演示需要放到左上角吧,效果如下图. 试着单击浮动控

原生js和jquery实现图片轮播淡入淡出效果

  原生js和jquery实现图片轮播淡入淡出效果          本文给大家分享的是使用原生的js和jQuery2种方法,分别实现图片轮播的淡入淡出效果的代码,非常实用,也方便小伙伴们对比分析,希望对大家学习js和jq能够有所帮助. 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个

jquery淡入淡出效果介绍

 本篇文章主要是对jquery淡入淡出效果的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 样式:      代码如下:  <style type="text/css">       #win {               width: 98%;              position: absolute;                   display: none;           float:left;           }      

GoldWave怎么制作音频淡入淡出效果

  GoldWave怎么制作音频淡入淡出效果 1.我们可以首先在百度软件中心下载安装需要的软件到电脑,然后运行软件. 2.打开软件以后,我们点击OPEN选项打开需要处理的音频,当然也可以点击文件菜单[file]打开需要处理的音频文件. 3.打开音频文件后,我们这里鼠标拖动左边和右边的滑块,设置好要淡入的音频区域,这里我们主要是设置要处理的范围. 4.然后我们选择效果菜单,然后点击声音中淡入,[effect-volume-fade in] 这时候出现的窗口中我们可以直接点击确定,当然自己也可以调整

基于jquery实现的文字淡入淡出效果_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

使用JQ来编写最基本的淡入淡出效果附演示动画_jquery

jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求.其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ. 一.基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环. 二.制作过程 1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹.这个支持文件是jQuery1.11,可以到jQuery官网中下载兼容旧浏览器IE6的jQu

jQuery实现首页图片淡入淡出效果的方法_jquery

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法.分享给大家供大家参考.具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示: 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML: <div id="carousel"> <div id="ca

测试SDWebImage淡入淡出效果在UITableView中的重用显示问题

测试SDWebImage淡入淡出效果在UITableView中的重用显示问题 这个是在上一篇教程的基础上所添加的测试环节! 效果图(从效果图中看是没有任何重用问题的): 源码: ImageCell.h 与 ImageCell.m // // ImageCell.h // SDWebImageFade // // Created by YouXianMing on 14-10-5. // Copyright (c) 2014年 YouXianMing. All rights reserved. /