鸿蒙开源组件——粒子脉冲效果

jacksky
发布于 2021-12-3 17:09
浏览
0收藏

ohos-Views

ohos-Views

自定义组件

  1. 自定义组件-particles(粒子效果)
  2. 自定义组件- pulse(脉冲button效果)
  3. 自定义组件-progress(progress效果)
  4. 自定义组件- bottomnavigationbar(底部导航栏)

引用

方式一: 通过library生成har包,添加har包到libs文件夹内 在entry的gradle内添加如下代码

  implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])

方式二:

 allprojects{
           repositories{
               mavenCentral()
           }
   }

   implementation 'io.openharmony.tpc.thirdlib:ohos-views-bottom-navigation:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-particles:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-progress-bar:1.0.3' 
   implementation 'io.openharmony.tpc.thirdlib:ohos-views-pulse-button:1.0.3' 

自定义组件-particles(粒子效果)

   <com.onexeor.particlesview.ParticlesView
           ohos:id="$+id:particlesView"
           ohos:width="match_content"
           ohos:height="match_content"
           ohos:pv_background_color="#000000"
           ohos:pv_linking_line_color="#ffffff"
           ohos:pv_linking_line_width="0.5fp"
           ohos:pv_linking_nodes_distance="100fp"
           ohos:pv_nodes_color="#ffffff"
           ohos:pv_nodes_count="100"
           ohos:pv_nodes_size="2fp"
           ohos:pv_nodes_speed_max="10"
           ohos:pv_nodes_speed_min="1"
           ohos:pv_touchable="true"
           ohos:visibility="visible"
   />

自定义组件- pulse(脉冲button效果

  <io.singulart.pulse_button.PulseButton
              ohos:margin="50fp"
              ohos:id="$+id:pulseBtn"
              ohos:width="100fp"
              ohos:height="100fp"
              ohos:pb_color_center_circle_stroke="#21D9CC"
              ohos:pb_inner_circle_stroke_padding="7fp"
              ohos:pb_pulse_speed="200"
              ohos:pb_stroke_width_of_center_circle="1fp"
              ohos:pb_stroke_width_of_outer_circle="2fp"
              ohos:pb_wave_padding="20fp"
              ohos:visibility="visible"
  />

自定义组件-progress(progress效果

  <io.singulart.particle_progress_bar.ParticleProgressBar
              ohos:id="$+id:progress"
              ohos:width="80fp"
              ohos:height="80fp"
              ohos:layout_alignment="center"
              ohos:ppb_color="#ffffff"
              ohos:ppb_count_balls="8"
              ohos:ppb_enabled="true"
              ohos:visibility="visible"
  />

自定义组件- bottomnavigationbar(底部导航栏)

<io.singulart.bottomnavigationbar.CenterNavigationButton
              ohos:id="$+id:centerBtn"
              ohos:width="83fp"
              ohos:height="83fp"
              ohos:layout_alignment="bottom|horizontal_center"
              ohos:bottom_margin="38fp"
              ohos:cnb_background_color="#282B43"
              ohos:cnb_foreground_color="#21D9CC"
              ohos:cnb_foreground_color_normal="#666DA5"
              ohos:visibility="visible"
  />

  <io.singulart.bottomnavigationbar.BottomNavigationBar
              ohos:id="$+id:btn_ng"
              ohos:width="match_parent"
              ohos:height="70fp"
              ohos:bnb_background_color="#282B43"
              ohos:bnb_item_selected_color="#21D9CC"
              ohos:bnb_text_item_color="#666DA5"
              ohos:bnb_top_left_radius="$float:fp_50"
              ohos:bnb_top_right_radius="$float:fp_50"
              ohos:bnb_shadow_radius="0fp"
              ohos:bnb_center_btn="true"
              ohos:bnb_cutout_deep="$float:fp_46"
              ohos:bnb_cutout_bottom_offset="$float:fp_42"
              ohos:bnb_cutout_leftTop_radius="$float:fp_10"
              ohos:bnb_cutout_rightTop_radius="$float:fp_10"
              ohos:bnb_cutout_bottomLeft_radius="$float:fp_50"
              ohos:bnb_cutout_bottomRight_radius="$float:fp_50"
              ohos:bnb_text_item_size="$float:vp_14"
              ohos:btn_title="$string:button_text"
              ohos:layout_alignment="bottom"
              ohos:visibility="visible"
  />

示例截图鸿蒙开源组件——粒子脉冲效果-鸿蒙开发者社区

 

 

entry运行要求

通过DevEco studio,并下载SDK 将项目中的build.gradle文件中dependencies→classpath版本改为对应的版本(即你的IDE新建项目中所用的版本)

ohos-Views-master.zip 38.05M 6次下载
已于2021-12-3 17:09:12修改
收藏
回复
举报
回复
    相关推荐