A. 史上最全解析:4种方法制作-PPT跑马灯/走马灯图片轮播动画
全面解析不同场景下的跑马灯PPT图片动画制作技巧概要:精准动画衔接、路径起点终点位置设置与插件提高效率。本文将从动画制作方法、操作步骤、优缺点以及解决场景难题方面,深入解析制作跑马灯动画的全过程。通过幻云PPT设计与大雄董军的指导,让你轻松掌握制作跑马灯动画的精髓。
跑马灯动画,源自传统节日元宵节特制灯笼效果,具有持续循环滚动的动态美。这种动画效果在PPT中广泛应用,如多图人物介绍、MG动画背景循环、遮罩加平板等场景。制作跑马灯动画的关键在于精准衔接动画、设置路径起点终点位置和利用插件提高效率。
在不同场景下,制作跑马灯动画的方法各有侧重。本文将详解四种制作方法,重点解决无缝衔接和无跳帧持续轮播的难点。
首先,介绍一种便捷方法。利用姥爷的插件OKPlus5.2中的Plus特效,轻松实现跑马灯动画。操作简单,但建议图片数量不宜过多,以防动画速度过快,调整复杂。
其次,推荐一种易于调整速度的方法。通过延长每个动画的持续时间和等比例延长延迟时间,实现动画速度的精准控制。同时,文章提供了如何快速统一图片高度、垂直对齐和左右无缝贴合的技巧,使操作过程更加高效。
对于图片组合后宽度与幻灯片不一致的情况,文章提供了两种解决方案。方法一是将所有图片组合后与幻灯片等宽,并通过动画效果实现连续轮播。方法二是采用飞入和飞出动画,实现一个组合飞入,另一个组合飞出的效果,无需延迟。
最后,文章介绍了一种通用的方法——路径+补位法。这种方法适合图片数量较多且组合后宽度超出幻灯片的情况。通过调整路径动画的终点位置,实现动画的无限循环,避免补位部分的图片重复出现。
通过以上详尽的步骤解析,你可以根据具体的设计场景选择最适合自己的制作方法。不论是3D图轮、更多PPT动画思路和技巧,还是特定案例的应用,文章都将为你提供实用的指导。在制作过程中,利用PPT插件可以显着提高效率,让你的PPT作品更加出彩。
B. 几幅图片的走马灯效果怎么做
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示:
滚动的文字
适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子:
1、左右弹来弹去的跑马灯
弹来弹去跑马灯!
实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。
源码粘贴框:
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
2、跑的很快的跑马灯
跑的很快跑马灯!
只要在<marquee>标签内加上“scrollamount=30”参数即可。
3、带有超级链接的跑马灯
带有超链接的跑马灯!点我试试? 还有一条呢!点我试试?
其实实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。
源码粘贴框:
<marquee width=90%>
<a href="http://www.hongen.com/default.htm" target=_blank>带有超链接的跑马灯!点我试试?</a>
<a href="http://www.hongen.com/pc/index.htm" target=_blank>还有一条呢!点我试试?</a>
</marquee>
以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。
参数 用法介绍
behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动
direction=left,right 跑马方向:从左向右,从右向左
loop=100 跑马次数:循环100次,如不写默认为一直循环
width=100%,height=200 跑马范围:宽为100%,高为200像素
scrollamount=20 跑马速度:数越大越快
scrolldelay=500 跑马延时:毫秒数,利用它可实现跃进式滚动
hspace=20,vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色
这里向你介绍几个用JavaScript实现的较复杂的跑马灯,你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。
1、状态栏中的跑马灯
在默认状态下浏览器的状态栏中显示的是链接指向信息,给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示,一定能取得很好的效果。
源码粘贴框:
1、将以下代码放在<head>与</head>之间:
<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="洪恩在线欢迎你! ";
Mes[1]="感谢你关注电脑交互教程 ";
Mes[2]="网页制作技巧 之 跑马灯大全 ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
// End -->
</script>
2、在<body>标签内加入onload 语句:
<body onload="scroll();">
实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间,这段代码中包含了scroll()函数,它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容,你也可以显示更多条的信息,不过代码中i的值应等于信息的条数,也就是等于mes[]数组的维数;
(2)然后在<body>标签中加入onload()语句即可。
2、超链接的跑马灯式提示信息
把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看:
跑马灯大全(一) 电脑交互教程 网页制作技巧技巧
源码粘贴框:
1.将下面代码放在<body>标签下:
<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
2.然后在要出现提示信息的链接中,添加onMouseover语句:
<a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a>
<a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a>
<a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧技巧</a>
实现步骤:
(1)先在<body>标签下面插入一段JavaScript代码;
(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。
还有一个参考下面的网址
C. 什么是跑马灯
跑马灯是传统特色手工艺品,亦是传统节日玩具之一。由毛竹编织成马头,马尾,属于灯笼的一种。
在过去,跑马灯一般在春节等喜庆的日子里才表演,由二十来位11—14岁小孩组成,边跳边唱,根据节奏快慢形成不同阵势,有喜庆、丁财两旺、五谷丰登的寓意。跑马灯属系在身上糊上颜色鲜艳的纸,如今已由丝绸取代。
中国传统玩具之一,灯笼的一种,常见于元夕、元宵、中秋等节日。灯内点上蜡烛,烛产生的热力造成气流,令轮轴转动。轮轴上有剪纸,烛光将剪纸的影投射在屏上,图象便不断走动。
因多在灯各个面上绘制古代武将骑马的图画,而灯转动时看起来好像几个人你追我赶一样,故名跑马灯。跑马灯内的蜡烛需要切成小段,放入走马灯时要放正,切勿斜放。
(3)黑底马灯背景图片扩展阅读
跑马灯的起源:
科学史研究者大都依据文学家范成大(1126—1193)的诗文记载,认为南宋时才有跑马灯。范成大的诗集中有首记叙苏州正月十五上元节 的诗,诗中描绘了千姿百态的灯。
诸如飘升于天的孔明灯,在地上滚动的大滚灯,以及“转影骑纵横的走马灯”等。当时似无“跑马灯灯”之名,诗人自注为“跑马灯”。
“跑马灯”在中国文学中有关此事的最早记载,诗人所记为淳熙十一年之事,即公元1184年。以此计后已有800 年历史了。
跑马灯有两大特点,利用热气流作动力;另一个是以涡轮装置带动灯上画面转动。若依此两点追本溯源,它在北宋出现之前,已经历了至少有1300年的发展史。