FLUTTER ECOSYSTEM

KreatorDev/zoom_tap_animation

Zoom Tap Animation 是一個套件,可讓您建立類似於 App Store(iOS 應用程式)Today 頁籤中項目在長按某個項目時的縮放動畫效果。當您長按時,它會開始放大,釋放時則會縮小。

zoom_tap_animation 專案封面
Stars
3
Forks
7
最近推送(UTC)
2023年3月29日
專案狀態
未封存
Ayoub Kremcht GitHub avatar
GITHUB User

Ayoub Kremcht ↗

📱 Software Developer 🎨 UI/UX Designer

語言DartHTMLSwiftKotlinObjective-C

此儲存庫發佈的套件

使用的依賴

依賴清單 2 項
  • flutter{"sdk":"flutter"}
  • flutter_test開發依賴{"sdk":"flutter"}

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

pub package

Zoom Tap Animation

Zoom Tap Animation is is a package that allows you to make an zoom animation effect similar to App Store's (ios app) items in Today tab, when you long tap on some item, it start to zoom in then it zoom out when you release it.

Screenshots:

Source of idea

The idea is inspired from App Store app in Today tab where you can long tap on some item and it start to zoom in then zoom out as shown in the screenshot below.

https://raw.githubusercontent.com/KreatorDev/zoom_tap_animation/main/screenshots/original_idea.gif
Example:

Check out the example project in the example folder.

https://raw.githubusercontent.com/KreatorDev/zoom_tap_animation/main/screenshots/example.gif

Installation:

add the package to your dependencies
dependencies:
  zoom_tap_animation: ^1.1.0
import 'package:zoom_tap_animation/zoom_tap_animation.dart';

Usage:

default use of ZoomTapAnimation widget
ZoomTapAnimation(
      onTap: (){},
      child: YOUR_WIDGET
);
and you can also define custom parameters
ZoomTapAnimation(
      child: YOUR_WIDGET,
      onTap: (){},
      onLongTap: (){},
      enableLongTapRepeatEvent: false,
      longTapRepeatDuration: const Duration(milliseconds: 100),
      begin: 1.0,
      end: 0.93,
      beginDuration: const Duration(milliseconds: 20),
      endDuration: const Duration(milliseconds: 120),
      beginCurve: Curves.decelerate,
      endCurve: Curves.fastOutSlowIn
);
also you can use ZoomTapAnimation with your custom gestures
ZoomTapAnimation(
      child: GestureDetector(
      onTap: () {},
      onLongPress: (){},
      onDoubleTap: (){},
      // you can add more gestures...
      child: Container(color: Colors.yellow, width: 100.0, height: 100.0),
      ),
);
parameters
parameter description default
child your child widget that you want to put the zoom effect on.
onTap what should happen when you tap on the widget. null
onLongTap what should happen when you long tap on the widget. null
enableLongTapRepeatEvent option to enable long tap loop which repeat every onTap event (in case onLongTap is specified, it repeats the onLongTap event). false
longTapRepeatDuration the duration between every onTap/onLongTap loop event. const Duration(milliseconds: 100)
begin the size of widget you want to begin with. 1.0
end the size of widget you want to begin with. 0.93
beginDuration the duration of the begin zoom in animation. const Duration(milliseconds: 20)
endDuration the duration of the end zoom in animation. const Duration(milliseconds: 120)
beginCurve the curve animation type of the begin zoom in animation. Curves.decelerate
endCurve the curve animation type of the end zoom in animation. Curves.fastOutSlowIn