eclipsesource / eclipsesource/tabris-js

Animation executed only after CollectionView stops scrolling

Open
#1,797 0 comments 0 reactions 0 assignees View on GitHub
bug ios
Dominant language
JavaScript
Stars
1.4k
Forks
171
PR merge metrics
No merged PRs in 30d

Description

### Problem description

When calling `animate()` while a `CollectionView` is scrolling, the animation will be executed only after the `CollectionView` stops scrolling on iOS.

### Expected behavior

The animation should be executed right away, independent from CollectionView scroll.

### Environment

- Tabris.js version: 2.7
- Device: simulator
- OS: 12.1

### Code snippet

```javascript
// Create a collection view, initialize its cells and fill it with items
const {CollectionView, Composite, ImageView, TextView, ui} = require('tabris');
const IMAGE_PATH = 'resources/';

let people = [
['Holger', 'Staudacher', 'holger.jpg'],
['Ian', 'Bull', 'ian.jpg'],
['Jochen', 'Krause', 'jochen.jpg'],
['Jordi', 'Böhme López', 'jordi.jpg'],
['Markus', 'Knauer', 'markus.jpg'],
['Moritz', 'Post', 'moritz.jpg'],
['Ralf', 'Sternberg', 'ralf.jpg'],
['Tim', 'Buschtöns', 'tim.jpg']
].map(([firstName, lastName, image]) => ({firstName, lastName, image: IMAGE_PATH + image}));

new CollectionView({
left: 0, top: 0, right: 0, bottom: 0,
itemCount: people.length,
cellHeight: 256,
createCell: () => {
let cell = new Composite();
new ImageView({
top: 16, centerX: 0, width: 200, height: 200
}).appendTo(cell);
new TextView({
left: 30, top: 'prev() 16', right: 30,
alignment: 'center'
}).appendTo(cell);
return cell;
},
updateCell: (cell, index) => {
let person = people[index];
cell.apply({
ImageView: {image: person.image},
TextView: {text: person.firstName}
});
}
}).on('select', ({index}) => console.log('selected', people[index].firstName))
.once('scroll', () => {
ui.contentView.find('#box').first().animate({transform:{scaleX: 0.1, scaleY: 0.1}}, {duration: 1000});
})
.appendTo(ui.contentView);

ui.contentView.append(
new Composite({id: 'box', centerX: 0, centerY: 0, width: 100, height: 100, background: 'red'})
);
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.