ListCell Animation in ListView
After a long time I am back again with new stuffs. I have seen that JavaFX has got so many demand nowadays. Lots of people are requesting for something new something wow effect. In the same way one of my colleagues told me what if we have listview got some effects on scrolling the list. I got some dig around JavaFX Animation API and did some animation with ListCell but I thought it would be great if I share my works to you guys.
First We got to revamp what is the Listcell. ListCell are designed for making user to display text content in list format. But we can override these and make our own like displaying images,shapes and other controls as well.
ListCell inherits the character of Labeled so in default ListCell only displays the text content.If you want some control in your listcell other than label then there are some bunch of cellfactory in javafx.scene.control.cell package.
Every ListCell are being rendered according to the cellFactory implementation so you are free to implement your own cellFactory to make the listcell even more customizable. I had posted about TableCell customization which utilizes use of cellFactory (TableView Cell Modify)
Lets roll with the ListCell customization.
——————————————————————————————————————————————————————
public class AnimatedListCell<T> extends AbstractAnimatedListCell<T> { //... other codes ...
/**
* Get cellfactory of AbstractAnimatedListCell for ListView
*
* @param type
* @return
*/
public static Callback<ListView<String>, ListCell<String>> forListView(final AnimationType... type) {
return new Callback<ListView<String>, ListCell<String>>() {
@Override
public ListCell<String> call(
ListView<String> p) {
return new AnimatedListCell<>(new DefaultStringConverter(), type);
}
};
} /**
* Get cellfactory of AbstractAnimatedListCell for ListView with StringConverter
*
* @param <T>
* @param sc
* @param type
* @return
*/
public static <T extends Object> Callback<ListView<T>, ListCell<T>> forListView(
final StringConverter<T> sc, final AnimationType... type) {
return new Callback<ListView<T>, ListCell<T>>() {
@Override
public ListCell<T> call(
ListView<T> p) {
return new AnimatedListCell<>(sc, type);
}
}; } /**
* For getting the KeyFrames of specific AnimationType
*
* @param types
* @return
*/
@Override
protected KeyFrame[] getKeyFrames(AnimationType[] types) {
if (types == null) {
return null;
}
KeyFrame[] frames = null;
for (AnimationType type : types) {
switch (type) {
case FADE_OUT:
frames = anim.getFadeOut(frames);
break;
case FLAP_RIGHT:
frames = anim.getFlapRight(frames);
break;
case FLATTERN_OUT:
frames = anim.getFlatternOut(frames);
break;
case FLY_FROM_DOWN:
frames = anim.getFlyFromDown(frames);
break;
case FLY_FROM_UP:
frames = anim.getFlyFromUp(frames);
break;
case ROTATE_RIGHT:
frames = anim.getRotateYRight(frames);
break;
case SPEED_LEFT:
frames = anim.getSpeedLeft(frames);
break;
case SPEED_RIGHT:
frames = anim.getSpeedRight(frames);
break;
case TRANSITION_DOWN:
frames = anim.getTransitionDown(frames);
break;
case TRANSITION_LEFT:
frames = anim.getTransitionLeft(frames);
break;
case TRANSITION_RIGHT:
frames = anim.getTransitionRight(frames);
break;
case TRANSITION_TOP:
frames = anim.getTransitionTop(frames);
break;
case ZOOM_IN:
frames = anim.getZoomIn(0, frames);
break;
case POP_OUT:
frames = anim.getPopOut(frames);
break; }
}
return frames; } @Override
protected void updateItem(T t, boolean bln) {
//overriding the super interface
super.updateItem(t, bln); }
}
Above Class is subclass of AbstractAnimatedListCell so you can implement this in your cellFactory. Currently AbstractAnimatedListCell is subclass of ListCell which helps to make the animation possible. Now Lets directly move to the animation implementation.
/**
*
* @author Narayan G. Maharjan <me@ngopal.com.np>
*/
public class ListViewAnimation extends Application {
ObservableList list = FXCollections.observableArrayList(); ListView<String> listView; ComboBox<AnimationType> box; HBox hbox; AnchorPane root; Button btn; /**
* For initializing Containers
*/
public void initContainers() {
root = new AnchorPane();
hbox = new HBox(10); AnchorPane.setBottomAnchor(listView, 50d);
AnchorPane.setTopAnchor(listView, 10d);
AnchorPane.setLeftAnchor(listView, 10d);
AnchorPane.setRightAnchor(listView, 10d);
AnchorPane.setBottomAnchor(hbox, 10d);
AnchorPane.setLeftAnchor(hbox, 10d);
} /**
* For initializing controls
*/
public void initControls() {
listView = new ListView<>();
listView.setCellFactory(AnimatedListCell.forListView(AnimationType.ROTATE_RIGHT, AnimationType.FADE_OUT)); box = new ComboBox<>();
box.valueProperty().addListener(new ChangeListener<AnimationType>() {
@Override
public void changed(
ObservableValue<? extends AnimationType> ov, AnimationType t, AnimationType t1) {
if (!t1.equals(t)) {
listView.setCellFactory(AnimatedListCell.forListView(t1));
}
}
}); btn = new Button("Add New");
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
list.add("Added New");
}
}); } @Override
public void start(Stage stage) throws Exception {
//Loading custom fonts
Font.loadFont(getClass().getResource("fonts/segoesc.ttf").toExternalForm(), 12); //adding values to list
for (int i = 0; i < 10; i++) {
list.add("" + i);
} //Initializing Controls
initControls();
initContainers(); //Adding Values
listView.setItems(list);
box.getItems().addAll(AnimationType.values()); //Adding controls to container
hbox.getChildren().addAll(new Label("Animation Type:"), box, btn);
root.getChildren().addAll(listView, hbox); Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("css/style.css").toExternalForm());
scene.setCamera(new PerspectiveCamera());
stage.setTitle("List Animation!");
stage.setScene(scene);
stage.show(); } public static void main(String[] args) {
launch(args);
}
}
Well after implementing those Animation you can get animation instantly on list cell update . However I have added some few styling to make it even more better.
If you want to try out yourself . Grab the source code from here:
ListCell Animation in ListView的更多相关文章
- Animation显示ListView的每一条记录
activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- Android5.0 ListView特效的简单实现
Android5.0中对于动画可所谓是情有独钟,在设计规范中大量展现了listview的动画,其实也就是一个目的:将items动画显示出来.这个看起来很炫的效果,其实实现也蛮简单的,我下面就来用动画简 ...
- android3D动画,绕y轴旋转
原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...
- Android中轴旋转特效实现,制作别样的图片浏览器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10766017 Android API Demos中有很多非常Nice的例子,这些例 ...
- javaFX笔记----ComboBox模仿qq账号下拉框删除账号
myComboBox.setCellFactory( new Callback<ListView<String>, ListCell<String>>() { @O ...
- javafx ComboBox Event and change cell color
public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
- ListView Animation
简单介绍一下4种动画效果方式AnimationSet set = new AnimationSet(false); Animation animation = new AlphaAnimation(0 ...
- ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation
//=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...
- Android Animation动画实战(一): 从布局动画引入ListView滑动时,每一Item项的显示动画
前言: 之前,我已经写了两篇博文,给大家介绍了Android的基础动画是如何实现的,如果还不清楚的,可以点击查看:Android Animation动画详解(一): 补间动画 及 Android An ...
随机推荐
- oracle数据导入的常用命令
oracle 中数据库完全导入导出:cmd命令行模式 oracle数据库cmdfile数据库服务器constraints Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.ex ...
- Codeforces Round #272 (Div. 2) C. Dreamoon and Sums (数学 思维)
题目链接 这个题取模的时候挺坑的!!! 题意:div(x , b) / mod(x , b) = k( 1 <= k <= a).求x的和 分析: 我们知道mod(x % b)的取值范围为 ...
- easyui datagrid列中使用tooltip
要实现这样一个效果:数据加载到DATAGRID中,鼠标移至某一列时,会弹出tooltip提示框. 最初的实现方法: { field: 'Reply', title: '备注', width: 220, ...
- Python3 学习第六弹: 迭代器与生成器
1> 迭代器 迭代的意思类似递归一般,不断地对一个对象做重复的操作.来看个例子: class Fibs: def __init__(self): self.last = self.now = 1 ...
- jQuery 动画 _animate() 方法
一.jQuery animate() 方法用于创建自定义动画. 必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow& ...
- laravel中的命名公约规范及relation N+1问题
User: model ; users: 表名: user_id 键值 relation: public function tasks(){return $this->belongsToMa ...
- Maven之 环境搭建
这几天开始了maven的学习,看了孔浩老师的视频(http://pan.baidu.com/s/1o7bg2h0),以及黄勇大牛的博客(http://my.oschina.net/huangyong/ ...
- phpstorm10.0.1和webstorm11注册
webstorm11 for win 注册时选择“License server”输入“http://15.idea.lanyus.com/”点击“OK” phpstorm10.0.1 for win ...
- HDU 4606 Occupy Cities ★(线段相交+二分+Floyd+最小路径覆盖)
题意 有n个城市,m个边界线,p名士兵.现在士兵要按一定顺序攻占城市,但从一个城市到另一个城市的过程中不能穿过边界线.士兵有一个容量为K的背包装粮食,士兵到达一个城市可以选择攻占城市或者只是路过,如果 ...
- 微信 ua
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, l ...