HarmonyOS 鸿蒙Next Swiper滑动时，对内部子组件的动画影响

swiper的滑动不影响图片自身的平移效果，demo请参考：

// xxx.ets
class CommonDataSource<T> implements IDataSource {
private dataArray: T[] = [];
private listeners: DataChangeListener[] = [];
constructor(element: T[]) {
this.dataArray = element;
}
public getData(index: number) {
return this.dataArray[index]
}
public totalCount(): number {
return this.dataArray.length;
}
public addData(index: number, data: T[]): void {
this.dataArray = this.dataArray.concat(data);
this.notifyDataAdd(index);
}
public pushData(data: T): void {
this.dataArray.push(data);
this.notifyDataAdd(this.dataArray.length - 1);
}
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
this.listeners.splice(pos, 1);
}
}
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener);
}
}
notifyDataReload(): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataReloaded();
})
}
notifyDataAdd(index: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataAdd(index);
})
}
notifyDataChange(index: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataChange(index);
})
}
notifyDataDelete(index: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataDelete(index);
})
}
notifyDataMove(from: number, to: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataMove(from, to);
})
}
}
class ProductDataModel {
img: string = ‘’;
comment: string = ‘’;
}
const productData: ProductDataModel[] = [
{
img: ‘common/ic_banner01.png’,
comment: ‘1’,
},
{
img: ‘common/ic_banner02.png’,
comment: ‘1’,
},
{
img: ‘common/ic_banner03.png’,
comment: ‘1’,
},
{
img: ‘common/ic_banner04.png’,
comment: ‘1’,
}
]
@Entry
@Component
struct SwiperExample {
private swiperController: SwiperController = new SwiperController()
build() {
Column({ space: 5 }) {
Swiper(this.swiperController) {
LazyForEach(new CommonDataSource<ProductDataModel>(productData), (item: ProductDataModel) => {
Image($rawfile(item.img))
.width(‘100%’)
.objectFit(ImageFit.Fill)
.translate({ x: 40, y:0 })
.transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
TransitionEffect.translate({ x: 40, y: 0 })))
// .transition(TransitionEffect.SLIDE.animation({
//   //duration: this.getDuration(),
//   curve: Curve.EaseOut,
//   iterations: 1,
//   playMode: PlayMode.Normal,
// }))
// .position(this.getFirstPosition())
// .translate({ x: this.getThumbXPosition(), y: 0 })
}, (item: ProductDataModel) => JSON.stringify(item))
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(4000)
.loop(true)
.duration(1000)
.itemSpace(0)
.curve(Curve.Linear)
.onChange((index: number) => {
console.info(index.toString())
})
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("current offset: " + extraInfo.currentOffset)
})
.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("targetIndex: " + targetIndex)
console.info("current offset: " + extraInfo.currentOffset)
console.info("target offset: " + extraInfo.targetOffset)
console.info("velocity: " + extraInfo.velocity)
})
.onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
console.info("index: " + index)
console.info("current offset: " + extraInfo.currentOffset)
})
}.width(‘100%’)
.margin({ top: 5 })
}
}