`

Infinite Progress And Rotation from shai`s

 
阅读更多

   转载:http://hi.baidu.com/dunwin/blog/item/26abd4ca31c9a6f652664feb.html

 

 

 

 

 

 

When looking at the Makeover demo I posted last week one might assume the rotating wheel animation is a standard animation or gif. This is not the case although I could have gone with that approach I chose to use a different tool to achieve this effect.
I built an infinite progress component which displays a rotating image as an animation, this considerably reduces JAR and heap space usage for an animation that looks quite similar to the one produced by a static animation (which we create from GIF). The reason for this is in the way animations work, animations have no sense of rotation, they store the change to the image (as lines) and when the image rotates the animation sees the entire image as changed and produces a "key frame". Key frames are large both in storage and in memory, to hold a 32x32 pixel animation with 8 keyframes I would need approximately 32x32x8+1024 (1024 for palette). This might not seem big, but with increase in resolution the size rises quite a bit...
Rotation is not always efficient, in fact it can be just as inefficient as a keyframe since it needs to create a new image. However, LWUIT has a special optimization on MIDP (this doesn't not apply to LWUIT on CDC) which uses the platforms built in rotation abilities for square angles (90, 180 & 270) hence removing completely the overhead of the image. This isn't enough since rotating on square angles would produce a jumpy effect, which is why I rotate once to 45 degrees and then rotate 2 images in square angles only thus producing what seems to be 8 images but only paying the cost for 2 images.

Another significant advantage is that unlike animations I can make full use of translucency since the alpha channel isn't removed in these images, this allows for flowing rotation effects.

The rotate method currently makes many assumptions and is mostly useful for square images, however it works rather nicely for all angles which is something that currently plain MIDP doesn't support.

public class InfiniteProgressIndicator extends com.sun.lwuit.Label {
 private Image[] angles;
 private int angle;

 public InfiniteProgressIndicator(Image image) {
     Image fourtyFiveDeg = image.rotate(45);
     angles = new Image[] {image, fourtyFiveDeg, image.rotate(90), fourtyFiveDeg.rotate(90),
         image.rotate(180), fourtyFiveDeg.rotate(180), image.rotate(270), fourtyFiveDeg.rotate(270)};
     getStyle().setBgTransparency(0);
     setIcon(image);
     setAlignment(Component.CENTER);
 }
  
 public void initComponent() {
     getComponentForm().registerAnimated(this);
 }
  
 public boolean animate() {
     angle++;
     setIcon(angles[Math.abs(angle % angles.length)]);
     return true;
 }
}

 

分享到:
评论

相关推荐

    iscroll-5-pull-to-refresh-and-infinite-demo

    《iscroll-5-pull-to-refresh-and-infinite:下拉刷新与无限滚动的实现》 在移动设备上,用户界面的交互方式越来越多样化,其中下拉刷新(Pull-to-Refresh)和无限滚动(Infinite Scroll)是两种常见的增强用户体验...

    infinite terms and non sensible model

    ### 无限项与非理性模型 #### Lambda演算相关问题及无限Lambda项的语法与语义 在探讨无限Lambda项之前,我们先简要回顾一下Lambda演算的基础知识及其在计算机科学中的应用背景。 **Lambda演算**是一种形式化的...

    Element InfiniteScroll无限滚动的具体使用方法

    Element InfiniteScroll无限滚动是一种常见的前端技术,用于在用户滚动至页面底部时动态加载更多内容,从而减少页面的跳转次数,并提升用户体验。Element UI是一个基于Vue.js的前端UI框架,它提供了一套丰富的组件。...

    iscroll5-pull-to-refresh-and-infinite-demo

    本示例`iscroll5-pull-to-refresh-and-infinite-demo`主要展示了如何利用`iscroll5`实现上拉加载(Infinite Scroll)和下拉刷新(Pull to Refresh)功能,以提升用户体验。 `iscroll5`的核心特性在于其平滑的滚动...

    jquery.infinitescroll滑动加载更多

    `jQuery.InfiniteScroll`是一个流行的JavaScript插件,用于实现网页内容的无限滚动效果。这个插件主要用于提升用户体验,当用户滚动页面到底部时,它会自动加载更多内容,无需手动点击“加载更多”按钮。这种技术常...

    jquery.infinitescroll.js演示示例以及常用参数

    **jQuery Infinite Scroll(无限滚动)插件** jQuery Infinite Scroll,也称为`infinitescroll.js`,是一款广泛使用的JavaScript插件,它实现了网页内容的自动滚动加载,即当用户滚动到页面底部时,新的内容会自动...

    Existence of infinite conservation laws of a variable-coefficient Korteweg-de Vries equation from fluid dynamics and plasma physics via symbolic computation

    Existence of infinite conservation laws of a variable-coefficient Korteweg-de Vries equation from fluid dynamics and plasma physics via symbolic computation,张春义,李娟,Mapping the method in Refs....

    CSS下拉菜单设计专家 Visual Infinite Menus

    《CSS下拉菜单设计专家:Visual Infinite Menus深度解析》 在网页设计中,下拉菜单作为导航系统的重要组成部分,其美观性和功能性至关重要。Visual Infinite Menus是一款专注于CSS下拉菜单设计的专业工具,它以其...

    Infinite Color调色插件

    无限色彩(Infinite Color)是一款专为Adobe Photoshop设计的调色插件,它极大地扩展了Photoshop在颜色调整方面的功能,让图像处理变得更加便捷和高效。这款插件尤其适合那些需要快速、批量或自动化调色的设计师和...

    infinitescroll.zip

    Infinitescroll.js是一个流行的jQuery插件,主要用于实现网页中的无限滚动效果,也称为滚动加载或无尽滚动。这个插件使得用户在浏览长页面时,无需翻页就能连续加载更多的内容,通常应用于新闻网站、社交媒体平台...

    infinitescroll的下拉刷新的例子

    Infinitescroll是一种常见的网页滚动加载技术,常用于社交媒体、新闻网站和电子商务平台,以便在用户滚动页面时无缝地加载更多内容,而无需点击“加载更多”或分页按钮。这种用户体验可以提升用户满意度,因为他们...

    UnityVR手势识别插件VR Infinite Gesture1.1.3

    UnityVR手势识别插件VR Infinite Gesture 1.1.3是一款专为虚拟现实(VR)环境设计的工具,主要用于在HTCVIVE平台上实现高级的手势交互。这款插件旨在提升用户体验,通过捕捉并解析用户的自然手势,使得用户能够在...

    Infinite Mixture Models with Nonparametric Bayes and the Dirichlet Process

    无限混合模型与非参数贝叶斯及狄利克雷过程 在数据分析和机器学习领域,混合模型是一种常用的方法,用于将复杂的数据集分解为多个更简单的组成部分。混合模型假设数据是由若干个潜在的、未观测到的分布(或称为...

    jquery infinite-carousel插件

    **jQuery Infinite Carousel插件详解** jQuery Infinite Carousel是一款广泛使用的JavaScript插件,专为网页设计师和开发者设计,旨在实现无限轮播的图片或内容展示。它以其简洁、高效和高度可定制性著称,使得在...

    infinitescroll+imagesLoaded+Masonry.zip

    Infinitescroll、imagesLoaded 和 Masonry 是网页开发中三个非常重要的库,它们分别用于实现无限滚动、图片懒加载和网格布局。这个压缩包 "infinitescroll+imagesLoaded+Masonry.zip" 提供了一个整合这三种技术的...

    Rescuing You in the Infinite Loop(1).apk

    Rescuing You in the Infinite Loop(1).apk

    使用Element的InfiniteScroll 无限滚动组件报错的解决

    在使用Element的InfiniteScroll 无限滚动时候出现以下错误: TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’ InfiniteScroll的更多用法element官网 ...

Global site tag (gtag.js) - Google Analytics